import QtQuick.Controls 1.4

import QtQuick 2.15
import QtQuick.Window 2.12
import QtQuick.Layouts 1.3
//import QtQuick.Controls 1.4
import QtQuick.Controls 2.15
//import QtQuick.Dialogs 1.3
import QtGraphicalEffects 1.14
//import QtQuick.Dialogs 1.3
import QtQuick.Templates 2.5 as T
import org.ukui.qqc2style.private 1.0 as StylePrivate
//import CustomComponents 1.0
//import Qt.labs.qmlmodels 1.0
import Custom.Models 1.0
//import QtQml.Models 2.15
ApplicationWindow {
    id: mywindow
    width: 640
    height: 480
    visible: true
//    color: StylePrivate.StyleHelper.lightcolorrole
    title: qsTr("Hello World")


    Component.onCompleted: {

        console.log("Application window palatte...", mywindow.palette.window)
    }

//    Button{
//        text: "closeButton"
//        property var buttonType: "closeButton"
//        icon{//主题图标
//    source:"image://imageProvider/qrc:/12345.svg"

//        }//"ukui-down-symbolic"

//    }


    StackView {
        id: stackView
        anchors.fill: parent
        initialItem: mainComponent // 初始页面
    }

    Component{
    id: mainComponent

    Item{
//        anchors.fill: parent

        ColumnLayout{
            anchors.centerIn: parent
            Button{
                text: "半透明控件"
                onClicked: stackView.push(transparentComponent)
            }
            Button{
                text: "无透明控件"
                onClicked: stackView.push(normalComponent)
            }
        }
    }
    }


    Component{
        id: transparentComponent
        Item{
            GridLayout{
                anchors.fill: parent
                columns: 5
                Button{
                    text: "返回"
                    onClicked: stackView.pop()
                }
                Button{
                    text: "Button"

                    onClicked: {
                        buttonWindow.visible = true
                    }
                    highlighted: true
                }

                Button{
                    text: "ToolButton"
                    onClicked: {
                        toolbuttonWindow.visible = true

                    }
                    highlighted: true

                }
                Button{
                    text: "Radio"
                    onClicked: {
                        radiobuttonWindow.visible = true;
                    }
                }
                //        Button{
                //            text: "RadioDelegate"
                //            onClicked: {
                //                radioDelegateWindow.visible = true;
                //            }
                //        }
                Button{
                    text: "CheckBox"
                    onClicked: {
                        checkboxWindow.visible = true;
                    }
                }
                //        Button{
                //            text: "CheckDelegate"
                //            onClicked: {
                //                checkWindowDelegate.visible = true;
                //            }
                //        }
                Button{
                    text: "TextFeild"
                    onClicked: {
                        textfieldWindow.visible = true;
                    }
                }
                Button{
                    text: "Menu"
                    onClicked: {
                        menuWindow.visible = true;
                    }
                }
                Button{
                    text: "ToolTip"
                    onClicked: {
                        tooltipWindow.visible = true;
                    }
                }
                Button{
                    text: "Switch"
                    onClicked: {
                        switchWindow.visible = true;
                    }
                }
                //        Button{
                //            text: "SwitchDelegate"
                //            onClicked: {
                //                switchDelegateWindow.visible = true;
                //            }
                //        }

                Button{
                    text: "progressbar"
                    onClicked: {
                        progressbarWindow.visible = true;
                    }
                }
                Button{
                    text: "roundbutton"
                    onClicked: {
                        roundbuttonWindow.visible = true;
                    }
                }
                Button{
                    text: "scrollbar"
                    onClicked: {
                        scrollbarWindow.visible = true;
                    }
                }
                Button{
                    text: "slider"
                    onClicked: {
                        sliderWindow.visible = true;
                    }
                }
                Button{
                    text: "spinbox"
                    onClicked: {
                        spinboxWindow.visible = true;
                    }
                }
                //        Button{
                //            text: "tabbar"
                //            onClicked: {
                //                tabbarWindow.visible = true;
                //            }
                //        }
                Button{
                    text: "combobox"
                    onClicked: {
                        comboboxWindow.visible = true;
                    }
                }
                Button{
                    text: "Label"
                    onClicked: {
                        labelWindow.visible = true;
                    }
                }
                Button{
                    text: "list"
                    onClicked: listWindow.visible = true;
                }
                //        Button{
                //            text: "filedialog"
                //            onClicked: fileDialog.visible = true;
                //        }
                Button{
                    text: "BusyIndicator"
                    onClicked: busyIndicatorWindow.visible = true;
                }

                Button{
                    text: "TextArea"
                    onClicked: textareaWindow.visible = true;
                }

                //        Button{
                //            text: "headerview"
                //            onClicked: verticalHeaderWindow.visible = true;
                //        }
            }
        }

    }



    Component{
        id: normalComponent
        Item{
            GridLayout{
                anchors.fill: parent
                columns: 5
                Button{
                    text: "返回"
                    onClicked: stackView.pop()
                }
                Button{
                    text: "Button"

                    onClicked: {
                        nbuttonWindow.visible = true
                    }
                    highlighted: true
                }

                Button{
                    text: "ToolButton"
                    onClicked: {
                        ntoolbuttonWindow.visible = true

                    }
                    highlighted: true

                }
                Button{
                    text: "Radio"
                    onClicked: {
                        nradiobuttonWindow.visible = true;
                    }
                }
                //        Button{
                //            text: "RadioDelegate"
                //            onClicked: {
                //                radioDelegateWindow.visible = true;
                //            }
                //        }
                Button{
                    text: "CheckBox"
                    onClicked: {
                        ncheckboxWindow.visible = true;
                    }
                }
                //        Button{
                //            text: "CheckDelegate"
                //            onClicked: {
                //                checkWindowDelegate.visible = true;
                //            }
                //        }
                Button{
                    text: "TextFeild"
                    onClicked: {
                        ntextfieldWindow.visible = true;
                    }
                }
                Button{
                    text: "Menu"
                    onClicked: {
                        nmenuWindow.visible = true;
                    }
                }
                Button{
                    text: "ToolTip"
                    onClicked: {
                        ntooltipWindow.visible = true;
                    }
                }
                Button{
                    text: "Switch"
                    onClicked: {
                        nswitchWindow.visible = true;
                    }
                }
                //        Button{
                //            text: "SwitchDelegate"
                //            onClicked: {
                //                switchDelegateWindow.visible = true;
                //            }
                //        }

                Button{
                    text: "progressbar"
                    onClicked: {
                        nprogressbarWindow.visible = true;
                    }
                }
                Button{
                    text: "roundbutton"
                    onClicked: {
                        nroundbuttonWindow.visible = true;
                    }
                }
                Button{
                    text: "scrollbar"
                    onClicked: {
                        nscrollbarWindow.visible = true;
                    }
                }
                Button{
                    text: "slider"
                    onClicked: {
                        nsliderWindow.visible = true;
                    }
                }
                Button{
                    text: "spinbox"
                    onClicked: {
                        nspinboxWindow.visible = true;
                    }
                }
                //        Button{
                //            text: "tabbar"
                //            onClicked: {
                //                tabbarWindow.visible = true;
                //            }
                //        }
                Button{
                    text: "combobox"
                    onClicked: {
                        ncomboboxWindow.visible = true;
                    }
                }
                Button{
                    text: "Label"
                    onClicked: {
                        nlabelWindow.visible = true;
                    }
                }
                Button{
                    text: "list"
                    onClicked: nlistWindow.visible = true;
                }
                //        Button{
                //            text: "filedialog"
                //            onClicked: fileDialog.visible = true;
                //        }
                Button{
                    text: "BusyIndicator"
                    onClicked: nbusyIndicatorWindow.visible = true;
                }

                Button{
                    text: "TextArea"
                    onClicked: ntextareaWindow.visible = true;
                }

                //        Button{
                //            text: "headerview"
                //            onClicked: verticalHeaderWindow.visible = true;
                //        }
            }
        }

    }

    //    BackgroundItem {

//        anchors.fill: parent

//    }
    ApplicationWindow{
        id: buttonWindow
        visible: false
        width: 600
        height: 600
        color: "transparent"
        // Rectangle{
        // anchors.fill: parent
        // color: buttonWindow.palette.base
        // }

        GridLayout{
            columns: 3
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.centerIn: parent

            Button{
                text: "默认背景透明"
                width: 30
                height: 40
                flat: true
            }
            Button{
                text: "默认透明 悬浮高亮"
                icon{
                    //source:"qrc:/12345.svg"
                    name:"audio-headphones-symbolic"
//                    width: 36
//                    height: 36

                }
                flat: true
                highlighted: true

            }
            Button{
                text: "button disbale"
                icon{
                    //source:"qrc:/12345.svg"
                    name:"audio-headphones-symbolic"

                }
                enabled: false
            }

            Button{
                //text: "button02"
                icon{//主题图标
//                    name:"edit-clear-symbolic"
                    name:"audio-headphones-symbolic"

                }//"ukui-down-symbolic"
                width: 36
                height: 36

                Layout.preferredHeight: 36
                Layout.preferredWidth : 36
                Layout.maximumHeight: 36
                Layout.maximumWidth: 36
                Layout.minimumHeight: 36
                Layout.minimumWidth: 36

            }
            Button{
                text: "image加载图标"
                icon{//主题图标
                    name:"image://imageProvider/edit-clear-symbolic"
                }//"ukui-down-symbolic"
            }
            Button{
                text: "高亮按钮"
                property var buttonType: "importButton"//高亮按钮

            }
            Button{
                text: "高亮按钮"
                property var buttonType: "importButton"//高亮按钮
                icon{//主题图标
                    name:"audio-headphones-symbolic"
                }
            }
            Button{
                text: "高亮按钮 disable"
                property var buttonType: "importButton"//高亮按钮
                enabled: false
                icon{//主题图标
                    name:"audio-headphones-symbolic"
                }
            }

            Button{
                text: "menu btn"
                flat: true
                property var hasMenu: true//高亮按钮
                icon{//主题图标
                    name:"audio-headphones-symbolic"
                }
            }
            Button{
                text: "menu btn"
                property var hasMenu: true//高亮按钮
                icon{//主题图标
                    name:"audio-headphones-symbolic"
                }
            }

            Button{
                text: "menu btn"
                property var buttonType: "importButton"//高亮按钮
                property var hasMenu: true//高亮按钮
                icon{//主题图标
                    name:"audio-headphones-symbolic"
                }
            }

            Button{
                text: "menu btn"
                enabled: false
                flat: true
                property var hasMenu: true//高亮按钮
                icon{//主题图标
                    name:"audio-headphones-symbolic"
                }
            }
            Button{
                text: "menu btn"
                enabled: false
                property var hasMenu: true//高亮按钮
                icon{//主题图标
                    name:"audio-headphones-symbolic"
                }
            }

            Button{
                text: "menu btn"
                property var buttonType: "importButton"//高亮按钮
                enabled: false
                property var hasMenu: true//高亮按钮
                icon{//主题图标
                    name:"audio-headphones-symbolic"
                }
            }
            Button{
                text: "windowButton"
                x: 10
                y: 200
                property var buttonType: "windowButton"

            }
            Button{
                text: "windowButton diable"
                enabled: false
                property var buttonType: "windowButton"

            }
            Button{
                text: "closeButton"
                property var buttonType: "closeButton"
                icon{//主题图标
                    name:"edit-clear-symbolic"

                }//"ukui-down-symbolic"

            }
            Button{
                text: "closeButton disable"
                property var buttonType: "closeButton"
                enabled: false
                icon{//主题图标
                    name:"edit-clear-symbolic"

                }//"ukui-down-symbolic"

            }
            /*
            Button{
                text: "自定义背景 主题图标"
                property var normalStartColor: "red"
                property var normalEndColor: "blue"
                property var normalLabelColor: "green"

                icon{//主题图标
                    name:"edit-clear-symbolic"
                }//"ukui-down-symbolic"

            }
            Button{
                text: "自定义背景 qrc图标"
                property var normalStartColor: "red"
                property var normalEndColor: "blue"
                property var normalLabelColor: "green"

                icon{//主题图标
                    source:"qrc:/1234.png"
                }//"ukui-down-symbolic"

            }
            Button{
                text: "自定义背景 file图标"
                property var normalStartColor: "red"
                property var normalEndColor: "blue"
                property var normalLabelColor: "green"

                icon{//主题图标
                    source:"file:///home/tj/work/qt-demo/debian/qml/gitee/platformtheme-qml-demo/1234.png"
                }//"ukui-down-symbolic"

            }
*/
            Button{
                text: "qrc图标"
                icon{//qrc资源图标
                    source:"qrc:/12345.svg"

                }
            }
            Button{
                text: "qrc图标高亮"
                icon{//qrc资源图标高亮反白
                    source:"qrc:/12345.svg/highlight"

                }

            }
            Button{
                text: "qrc图标"
                icon{//qrc资源图标
                    source:"image://imageProvider/qrc:/12345.svg"

                }
            }
            Button{
                text: "qrc图标高亮"
                icon{//qrc资源图标高亮反白
                    source:"image://imageProvider/qrc:/12345.svg/highlight"

                }
            }
            Button{
                text: "主题图标"
                icon{//主题图标
                    name:"edit-clear-symbolic"

                }
            }
            Button{
                text: "主题图标高亮"
                icon{//主题图标高亮反白
                    name:"edit-clear-symbolic/highlight"

                }
            }
            Button{
                text: "透明 disable"
                enabled: false
                flat: true
                icon{
                    name:"edit-clear-symbolic"

                }
            }
            Button{
                text: "Disable"
                enabled: false
                icon{
                    name:"edit-clear-symbolic"

                }
            }
            Button{
                text: "Hight Disable"
                enabled: false
                property var buttonType: "importButton"
                icon{
                    name:"edit-clear-symbolic"

                }
            }
            Button{
                text: "Close Disable"
                enabled: false
                property var buttonType: "closeButton"
                icon{
                    name:"edit-clear-symbolic"

                }
            }
//            Image{//qrc资源图标
//                source: "image://imageProvider/qrc:/1234.png"
//            }
//            Image{//qrc资源图标高亮反白
//                source: "image://imageProvider/qrc:/1234.png/highlight"
//            }
//            Image{//主题图标
//                source: "image://imageProvider/edit-clear-symbolic"
//            }

        }

    }
    ApplicationWindow{
        id: nbuttonWindow
        visible: false
        width: 600
        height: 600
        // Rectangle{
        // anchors.fill: parent
        // color: buttonWindow.palette.base
        // }

        GridLayout{
            columns: 3
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.centerIn: parent

            Button{
                text: "默认背景透明"
                width: 30
                height: 40
                flat: true
                property bool transparent: false

            }
            Button{
                text: "默认透明 悬浮高亮"
                icon{
                    //source:"qrc:/12345.svg"
                    name:"audio-headphones-symbolic"
//                    width: 36
//                    height: 36

                }
                flat: true
                highlighted: true
                property bool transparent: false

            }
            Button{
                text: "button disbale"
                icon{
                    //source:"qrc:/12345.svg"
                    name:"audio-headphones-symbolic"

                }
                enabled: false
                property bool transparent: false

            }
            Button{
                //text: "button02"
                icon{//主题图标
//                    name:"edit-clear-symbolic"
                    name:"audio-headphones-symbolic"

                }//"ukui-down-symbolic"
                width: 36
                height: 36

                Layout.preferredHeight: 36
                Layout.preferredWidth : 36
                Layout.maximumHeight: 36
                Layout.maximumWidth: 36
                Layout.minimumHeight: 36
                Layout.minimumWidth: 36
                property bool transparent: false

            }
            Button{
                text: "image加载图标"
                icon{//主题图标
                    name:"image://imageProvider/edit-clear-symbolic"
                }//"ukui-down-symbolic"
                property bool transparent: false

            }
            Button{
                text: "高亮按钮"
                property var buttonType: "importButton"//高亮按钮
                property bool transparent: false

            }
            Button{
                text: "高亮按钮"
                property var buttonType: "importButton"//高亮按钮
                icon{//主题图标
                    name:"audio-headphones-symbolic"
                }
                property bool transparent: false

            }
            Button{
                text: "高亮按钮 disable"
                property var buttonType: "importButton"//高亮按钮
                enabled: false
                icon{//主题图标
                    name:"audio-headphones-symbolic"
                }
                property bool transparent: false
            }
            Button{
                text: "menu btn"
                flat: true
                property var hasMenu: true//高亮按钮
                property bool transparent: false

                icon{//主题图标
                    name:"audio-headphones-symbolic"
                }
            }
            Button{
                text: "menu btn"
                property var hasMenu: true//高亮按钮
                property bool transparent: false

                icon{//主题图标
                    name:"audio-headphones-symbolic"
                }
            }

            Button{
                text: "menu btn"
                property var buttonType: "importButton"//高亮按钮
                property var hasMenu: true//高亮按钮
                property bool transparent: false

                icon{//主题图标
                    name:"audio-headphones-symbolic"
                }
            }

            Button{
                text: "menu btn"
                enabled: false
                flat: true
                property var hasMenu: true//高亮按钮
                property bool transparent: false

                icon{//主题图标
                    name:"audio-headphones-symbolic"
                }
            }
            Button{
                text: "menu btn"
                enabled: false
                property var hasMenu: true//高亮按钮
                property bool transparent: false

                icon{//主题图标
                    name:"audio-headphones-symbolic"
                }
            }

            Button{
                text: "menu btn"
                property var buttonType: "importButton"//高亮按钮
                enabled: false
                property var hasMenu: true//高亮按钮
                icon{//主题图标
                    name:"audio-headphones-symbolic"
                }
                property bool transparent: false

            }

            Button{
                text: "windowButton"
                x: 10
                y: 200
                property var buttonType: "windowButton"
                property bool transparent: false

            }
            Button{
                text: "windowButton diable"
                enabled: false
                property var buttonType: "windowButton"
                property bool transparent: false

            }
            Button{
                text: "closeButton"
                property var buttonType: "closeButton"
                icon{//主题图标
                    name:"edit-clear-symbolic"

                }//"ukui-down-symbolic"
                property bool transparent: false

            }
            Button{
                text: "closeButton disable"
                property var buttonType: "closeButton"
                enabled: false
                icon{//主题图标
                    name:"edit-clear-symbolic"

                }//"ukui-down-symbolic"
                property bool transparent: false

            }
            /*
            Button{
                text: "自定义背景 主题图标"
                property var normalStartColor: "red"
                property var normalEndColor: "blue"
                property var normalLabelColor: "green"

                icon{//主题图标
                    name:"edit-clear-symbolic"
                }//"ukui-down-symbolic"

            }
            Button{
                text: "自定义背景 qrc图标"
                property var normalStartColor: "red"
                property var normalEndColor: "blue"
                property var normalLabelColor: "green"

                icon{//主题图标
                    source:"qrc:/1234.png"
                }//"ukui-down-symbolic"

            }
            Button{
                text: "自定义背景 file图标"
                property var normalStartColor: "red"
                property var normalEndColor: "blue"
                property var normalLabelColor: "green"

                icon{//主题图标
                    source:"file:///home/tj/work/qt-demo/debian/qml/gitee/platformtheme-qml-demo/1234.png"
                }//"ukui-down-symbolic"

            }
*/
            Button{
                text: "qrc图标"
                icon{//qrc资源图标
                    source:"qrc:/12345.svg"

                }
                property bool transparent: false

            }
            Button{
                text: "qrc图标高亮"
                icon{//qrc资源图标高亮反白
                    source:"qrc:/12345.svg/highlight"

                }
                property bool transparent: false

            }
            Button{
                text: "qrc图标"
                icon{//qrc资源图标
                    source:"image://imageProvider/qrc:/12345.svg"

                }
                property bool transparent: false

            }
            Button{
                text: "qrc图标高亮"
                icon{//qrc资源图标高亮反白
                    source:"image://imageProvider/qrc:/12345.svg/highlight"

                }
                property bool transparent: false

            }
            Button{
                text: "主题图标"
                icon{//主题图标
                    name:"edit-clear-symbolic"

                }
                property bool transparent: false

            }
            Button{
                text: "主题图标高亮"
                icon{//主题图标高亮反白
                    name:"edit-clear-symbolic/highlight"

                }
                property bool transparent: false

            }
            Button{
                text: "透明 disable"
                enabled: false
                flat: true
                icon{
                    name:"edit-clear-symbolic"

                }
                property bool transparent: false

            }
            Button{
                text: "Disable"
                enabled: false
                icon{
                    name:"edit-clear-symbolic"

                }
                property bool transparent: false

            }
            Button{
                text: "Hight Disable"
                enabled: false
                property var buttonType: "importButton"
                icon{
                    name:"edit-clear-symbolic"

                }
                property bool transparent: false

            }
            Button{
                text: "Close Disable"
                enabled: false
                property var buttonType: "closeButton"
                icon{
                    name:"edit-clear-symbolic"

                }
                property bool transparent: false

            }
//            Image{//qrc资源图标
//                source: "image://imageProvider/qrc:/1234.png"
//            }
//            Image{//qrc资源图标高亮反白
//                source: "image://imageProvider/qrc:/1234.png/highlight"
//            }
//            Image{//主题图标
//                source: "image://imageProvider/edit-clear-symbolic"
//            }

        }

    }

    ApplicationWindow{
        id: toolbuttonWindow
        visible: false
        width: 600
        height: 800
        color: "transparent"
        Rectangle{
        anchors.fill: parent
        color: "transparent"
        }
        ColumnLayout{
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.centerIn: parent

            ToolButton{
                icon.source: "ukui-down-symbolic"//主题图标
                Layout.preferredHeight: 36
                Layout.preferredWidth: 36
                Layout.minimumHeight: 36
                Layout.minimumWidth: 36
                Layout.maximumHeight: 36
                Layout.maximumWidth: 36
            }
            ToolButton{
                icon.source: "ukui-down-symbolic"//主题图标
                Layout.preferredHeight: 36
                Layout.preferredWidth: 36
                Layout.minimumHeight: 36
                Layout.minimumWidth: 36
                Layout.maximumHeight: 36
                Layout.maximumWidth: 36
                enabled: false
            }
            ToolButton{
                text: "toolbutton02"
            }
            ToolButton{
                text: "toolbutton02 disenable"
                enabled: false
            }
            ToolButton{
                text: "toolbutton03"
                flat: true
            }
            ToolButton{
                text: "toolbutton03 disenable"
                flat: true
                enabled: false

            }
            ToolButton{
                text: "toolbutton04"
                icon.source: "audio-headphones-symbolic"
                property var hasMenu: true//高亮按钮
                onPressed:  tm1.visible = !tm1.visible
                Menu {
                    id:tm1
                    y: 40
                    visible: false
                    title: qsTr("File")

                    MenuItem {
                        text: qsTr("toolbutton04")
                        // Action for "Open" can be defined here
                    }

                    MenuItem {
                        text: qsTr("toolbutton04")

                        // Action for "Save" can be defined here
                    }
                }
            }
            ToolButton{
                text: "toolbutton04 disenable"
                icon.source: "audio-headphones-symbolic"
                property var hasMenu: true//高亮按钮
                enabled: false
            }

            ToolButton{
                text: "111"
                icon.source: "audio-headphones-symbolic"
                property var hasMenu: true//高亮按钮
                property var buttonType: "importButton"//高亮按钮
                onPressed: tm2.visible = !tm2.visible
                Menu {
                    id:tm2
                    y: 40
                    visible: false
                    title: qsTr("File")

                    MenuItem {
                        text: qsTr("1111")
                        // Action for "Open" can be defined here
                    }

                    MenuItem {
                        text: qsTr("1111")

                        // Action for "Save" can be defined here
                    }
                }
            }
            ToolButton{
                text: "123"
                icon.source: "audio-headphones-symbolic"
                property var hasMenu: true//高亮按钮
                enabled: false
                property var buttonType: "importButton"//高亮按钮
            }
            ToolButton{
                icon.source: "application-menu"
                property var hasMenu: true//高亮按钮
                property var buttonType: "importButton"//高亮按钮
            }
            ToolButton{
                icon.source: "application-menu"
                property var hasMenu: true//高亮按钮
                property var buttonType: "importButton"//高亮按钮
                enabled: false
            }
            ToolButton{
                icon.source: "application-menu"
                property var hasMenu: true//高亮按钮
            }
            ToolButton{
                icon.source: "application-menu"
                property var hasMenu: true//高亮按钮
                flat: true
            }
            ToolButton{
                icon.source: "application-menu"
                property var hasMenu: true//高亮按钮
                flat: true
                enabled: false
            }
            ToolButton{
                icon.source: "application-menu"
                property var hasMenu: true//高亮按钮
                enabled: false
            }
            ToolButton{
                text: "toolbutton04"
                property var buttonType: "importButton"//高亮按钮
            }
            ToolButton{
                text: "toolbutton04 disable"
                property var buttonType: "importButton"//高亮按钮
                enabled: false

            }
            ToolButton{
                icon.source: "application-menu"
                Layout.preferredHeight: 36
                Layout.preferredWidth: 36
                Layout.minimumHeight: 36
                Layout.minimumWidth: 36
                Layout.maximumHeight: 36
                Layout.maximumWidth: 36

            }


//            ToolButton{
//                id: t4
//                //text: "toolbutton04"

//            property string icontype: "default"
////            StylePrivate.KyIcon {
////                    iconName: "ukui-down-symbolic"
////                    width: 16
////                    height: 16
////                    sunken: t4.pressed || (t4.checkable && 		t4.checked)
////                    hover: t4.hovered
////                    hasFocus: t4.activeFocus
////                    icontype: t4.icontype
////                }
//            }
        }
    }
    ApplicationWindow{
        id: ntoolbuttonWindow
        visible: false
        width: 600
        height: 800

        ColumnLayout{
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.centerIn: parent

            ToolButton{
                icon.source: "ukui-down-symbolic"//主题图标
                Layout.preferredHeight: 36
                Layout.preferredWidth: 36
                Layout.minimumHeight: 36
                Layout.minimumWidth: 36
                Layout.maximumHeight: 36
                Layout.maximumWidth: 36
                property bool transparent: false
            }
            ToolButton{
                icon.source: "ukui-down-symbolic"//主题图标
                Layout.preferredHeight: 36
                Layout.preferredWidth: 36
                Layout.minimumHeight: 36
                Layout.minimumWidth: 36
                Layout.maximumHeight: 36
                Layout.maximumWidth: 36
                enabled: false
                property bool transparent: false
            }
            ToolButton{
                text: "toolbutton02"
                property bool transparent: false
            }
            ToolButton{
                text: "toolbutton02 disenable"
                enabled: false
                property bool transparent: false
            }
            ToolButton{
                text: "toolbutton03"
                flat: true
                property bool transparent: false
            }
            ToolButton{
                text: "toolbutton03 disenable"
                flat: true
                enabled: false
                property bool transparent: false
            }
            ToolButton{
                text: "toolbutton04"
                property var hasMenu: true
                property bool transparent: false
                onPressed:  ntm1.visible = !ntm1.visible
                Menu {
                    id:ntm1
                    y: 40
                    visible: false
                    title: qsTr("File")

                    MenuItem {
                        text: qsTr("toolbutton04")
                        // Action for "Open" can be defined here
                    }

                    MenuItem {
                        text: qsTr("toolbutton04")

                        // Action for "Save" can be defined here
                    }
                }

            }
            ToolButton{
                text: "toolbutton04 disenable"
                property var hasMenu: true//高亮按钮
                enabled: false
                property bool transparent: false
            }
            ToolButton{
                text: "111"
                icon.source: "audio-headphones-symbolic"
                property var hasMenu: true//高亮按钮
                property var buttonType: "importButton"//高亮按钮
                onPressed: ntm2.visible = !ntm2.visible
                property bool transparent: false

                Menu {
                    id:ntm2
                    y: 40
                    visible: false
                    title: qsTr("File")

                    MenuItem {
                        text: qsTr("1111")
                        // Action for "Open" can be defined here
                    }

                    MenuItem {
                        text: qsTr("1111")

                        // Action for "Save" can be defined here
                    }
                }
            }
            ToolButton{
                text: "123"
                icon.source: "audio-headphones-symbolic"
                property var hasMenu: true//高亮按钮
                enabled: false
                property var buttonType: "importButton"//高亮按钮
            }
            ToolButton{
                icon.source: "application-menu"
                property var hasMenu: true//高亮按钮
                property var buttonType: "importButton"//高亮按钮
                property bool transparent: false
            }
            ToolButton{
                icon.source: "application-menu"
                property var hasMenu: true//高亮按钮
                property bool transparent: false
                flat: true
            }
            ToolButton{
                icon.source: "application-menu"
                property var hasMenu: true//高亮按钮
                property bool transparent: false
                flat: true
                enabled: false
            }
            ToolButton{
                icon.source: "application-menu"
                property var hasMenu: true//高亮按钮
                property var buttonType: "importButton"//高亮按钮
                enabled: false
                property bool transparent: false
            }
            ToolButton{
                icon.source: "application-menu"
                property var hasMenu: true//高亮按钮
                property bool transparent: false
            }
            ToolButton{
                icon.source: "application-menu"
                property var hasMenu: true//高亮按钮
                enabled: false
                property bool transparent: false
            }
            ToolButton{
                text: "toolbutton04"
                property var buttonType: "importButton"//高亮按钮
                property bool transparent: false
            }
            ToolButton{
                text: "toolbutton04 disable"
                property var buttonType: "importButton"//高亮按钮
                enabled: false
                property bool transparent: false

            }
            ToolButton{
                icon.source: "application-menu"
                Layout.preferredHeight: 36
                Layout.preferredWidth: 36
                Layout.minimumHeight: 36
                Layout.minimumWidth: 36
                Layout.maximumHeight: 36
                Layout.maximumWidth: 36
                property bool transparent: false

            }


//            ToolButton{
//                id: t4
//                //text: "toolbutton04"

//            property string icontype: "default"
////            StylePrivate.KyIcon {
////                    iconName: "ukui-down-symbolic"
////                    width: 16
////                    height: 16
////                    sunken: t4.pressed || (t4.checkable && 		t4.checked)
////                    hover: t4.hovered
////                    hasFocus: t4.activeFocus
////                    icontype: t4.icontype
////                }
//            }
        }
    }

    ApplicationWindow{
        id: radiobuttonWindow
        visible: false
        width: 600
        height: 600
        color: "transparent"
        Rectangle{
        anchors.fill: parent
        color: "transparent"
        }
        ColumnLayout{
            anchors.horizontalCenter: parent.horizontalCenter

            RadioButton{
                text: "RadioButton 01"
            }
            RadioButton{
                text: "RadioButton 02"
            }
            RadioButton{
                text: "RadioButton 03"
            }
            RadioButton{
                text: "RadioButton disable"
                enabled: false
            }

        }

        RadioButton{
            text: "RadioButton disable"
            checkable: true
            checked: true
            enabled: false
            anchors.centerIn: parent
        }
    }
    ApplicationWindow{
        id: nradiobuttonWindow
        visible: false
        width: 600
        height: 600

        ColumnLayout{
            anchors.horizontalCenter: parent.horizontalCenter
            RadioButton{
                text: "RadioButton 01"
                property bool transparent: false

            }
            RadioButton{
                text: "RadioButton 02"
                property bool transparent: false

            }
            RadioButton{
                text: "RadioButton 03"
                property bool transparent: false

            }
            RadioButton{
                text: "RadioButton disable"
                property bool transparent: false

                enabled: false
            }

        }

        RadioButton{
            text: "RadioButton disable"
            property bool transparent: false

            checkable: true
            checked: true
            enabled: false
            anchors.centerIn: parent
        }
    }



ApplicationWindow{
    id: radioDelegateWindow
    visible: false
    width: 600
    height: 600
    color: "transparent"
    Rectangle{
    anchors.fill: parent
    color: "transparent"
    }
    ColumnLayout{
        anchors.horizontalCenter: parent.horizontalCenter

        RadioDelegate{
            text: "RadioDelegate 01"
        }
        RadioDelegate{
            text: "RadioDelegate 02"
        }
        RadioDelegate{
            text: "RadioDelegate 03"
        }
        RadioDelegate{
            text: "RadioDelegate disable"
            enabled: false
        }

    }

    RadioDelegate{
        text: "RadioDelegate disable"
        checkable: true
        checked: true
        enabled: false
        anchors.centerIn: parent
    }
}

ApplicationWindow{
        id: checkboxWindow
        visible: false
        width: 600
        height: 600
        color: "transparent"
        Rectangle{
        anchors.fill: parent
        color: "transparent"
        }
        ColumnLayout{
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.centerIn: parent

            CheckBox{
                text: "CheckBox 01"
            }
            CheckBox{
                text: "CheckBox 02"
            }
            CheckBox{
                text: "CheckBox 03"
                tristate: true
                onCheckStateChanged: console.log("checked state", checkState, checked)
            }
            CheckBox{
                text: "CheckBox disable"
                enabled: false
            }
            CheckBox{
                text: "CheckBox disable"
                enabled: false
                checkable: true
                checked: true
                checkState: Qt.Checked
            }
            CheckBox{
                text: "CheckBox disable"
                enabled: false
                tristate: true
                checkState: Qt.PartiallyChecked
            }

        }
    }
ApplicationWindow{
        id: ncheckboxWindow
        visible: false
        width: 600
        height: 600

        ColumnLayout{
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.centerIn: parent

            CheckBox{
                text: "CheckBox 01"
                property bool transparent: false

            }
            CheckBox{
                text: "CheckBox 02"
                property bool transparent: false

            }
            CheckBox{
                property bool transparent: false

                text: "CheckBox 03"
                tristate: true
                onCheckStateChanged: console.log("checked state", checkState, checked)
            }
            CheckBox{
                text: "CheckBox disable"
                property bool transparent: false

                enabled: false
            }
            CheckBox{
                text: "CheckBox disable"
                property bool transparent: false

                enabled: false
                checkable: true
                checked: true
                checkState: Qt.Checked
            }
            CheckBox{
                text: "CheckBox disable"
                property bool transparent: false

                enabled: false
                tristate: true
                checkState: Qt.PartiallyChecked
            }

        }
    }

    ApplicationWindow{
        id: checkWindowDelegate
        visible: false
        width: 600
        height: 600
        color: "transparent"
        Rectangle{
        anchors.fill: parent
        color: "transparent"
        }
        ColumnLayout{
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.centerIn: parent

            CheckDelegate{
                text: "CheckDelegate 01"
            }
            CheckDelegate{
                text: "CheckDelegate 02"
            }
            CheckDelegate{
                text: "CheckDelegate 03"
                tristate: true
                onCheckStateChanged: console.log("checked state", checkState, checked)
            }
            CheckDelegate{
                text: "CheckDelegate disable"
                enabled: false
            }
            CheckDelegate{
                text: "CheckDelegate disable"
                enabled: false
                checkable: true
                checked: true
                checkState: Qt.Checked
            }
            CheckDelegate{
                text: "CheckDelegate disable"
                enabled: false
                tristate: true
                checkState: Qt.PartiallyChecked
            }

        }
    }

    ApplicationWindow{
        id: textfieldWindow
        visible: false
        width: 600
        height: 600
        color: "transparent"
        Rectangle{
        anchors.fill: parent
        color: "transparent"
        }
        ColumnLayout{
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.centerIn: parent

            TextField{
                placeholderText: "textfield 01"
                selectByMouse: true

            }
            TextField{
                enabled: false
                selectByMouse: true
                text: "disable"
            }
            TextField{
                text: "textfield 03"
                selectByMouse: true
            }
            TextField{
                text: "textfield 04"
                property bool passMode: true
            }
            TextField{
                enabled: false
                text: "textfield 04"
                property bool passMode: true
            }
        }
    }

    ApplicationWindow{
        id: ntextfieldWindow
        visible: false
        width: 600
        height: 600

        ColumnLayout{
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.centerIn: parent

            TextField{
                placeholderText: "textfield 01"
                selectByMouse: true
                property bool transparent: false

            }
            TextField{
                enabled: false
                selectByMouse: true
                text: "disable"
                property bool transparent: false

            }
            TextField{
                text: "textfield 03"
                selectByMouse: true
                property bool transparent: false

            }
            TextField{
                text: "textfield 04"
                property bool transparent: false

                property bool passMode: true
            }
            TextField{
                enabled: false
                text: "textfield 04"
                property bool transparent: false

                property bool passMode: true
            }
        }
    }

    MenuModel {
        id: menuModel
        Component.onCompleted: {
            // 添加初始菜单项
            addItem("打开文件", "openFile")
            addItem("保存文件", "saveFile")
            addItem("退出123", "quit")
        }
    }

    ApplicationWindow{
        id: menuWindow
        width: 600
        height: 600
        color: "transparent"
        Rectangle{
        anchors.fill: parent
        color: "transparent"
        }
        RowLayout{
            visible: true

                    x: 30
                    y: 200

//                    Menu {
//                        id: menutest
//                        title: qsTr("File")


//                        MenuItem {
//                            text: qsTr("Open")
//                            icon.source: "file:///home/tj/work/qt-demo/qml/testbutton/edit-clear-symbolic.svg"
//                            onXChanged: console.log("open xchangedddd", x)
//                            onYChanged: console.log("open ychangedddd", y)
//                            // Action for "Open" can be defined here
//                        }

//                        MenuItem {
//                            text: qsTr("Save")
//                            // Action for "Save" can be defined here
//                        }

//                        Menu {
//                            title: qsTr("Import")
//                        }
//                    }

                    Button{
                        text: "背景透明度为0"
                        onClicked: {

                            mymenu.popup(0,0)
//                            mymenu.forceActiveFocus()

                        }
                    }

                    MyMenu{
                        id: mymenu
                    }

                    ActionGroup {

                    id: radioGroup

                    exclusive: true // 互斥

                    // 可以设置一个被选中的，例如第一个

                    onCheckedActionChanged: console.log("Selected:", checkedAction.text)

                    }

                    // 创建多个Action，并放入同一个ActionGroup

                    Action {

                    id: action1

                    text: "Option 1"

                    checkable: true

                    ActionGroup.group: radioGroup

                    }

                    Action {

                    id: action2

                    text: "Option 2"

                    checkable: true

                    ActionGroup.group: radioGroup

                    }
//                    ActionGroup {

//                    id: radioGroup

//                    exclusive: true // 互斥

//                    // 可以设置一个被选中的，例如第一个

//                    onCheckedActionChanged: console.log("Selected:", checkedAction.text)

//                    }

                    Action {

                    id: action_1

                    text: "Option 2"

                    checkable: true

                    ActionGroup.group: radioGroup

                    }
                    Action {

                    id: action_2

                    checkable: true

                    ActionGroup.group: radioGroup

                    }
                    Action {

                    id: action_3

                    checkable: true

                    ActionGroup.group: radioGroup

                    }
                    Action {

                    id: action_4

                    checkable: true

                    ActionGroup.group: radioGroup

                    }
                    Action {

                    id: action_5

                    checkable: true

                    ActionGroup.group: radioGroup
                    }
                    Action {

                    id: action_6

                    checkable: true

                    ActionGroup.group: radioGroup
                    }
                    Action {

                    id: action_7

                    checkable: true

                    ActionGroup.group: radioGroup
                    }
                    Action {

                    id: action_8

                    checkable: true

                    ActionGroup.group: radioGroup
                    }
                    Action {

                    id: action_9

                    checkable: true

                    ActionGroup.group: radioGroup
                    }
                    Action {

                    id: action_10

                    checkable: true

                    ActionGroup.group: radioGroup
                    }
                    Action {

                    id: action_11

                    checkable: true

                    ActionGroup.group: radioGroup
                    }
                    Button {
                        id: menuBar0
                        text: "menu0"
                        onClicked: menutest0.visible = true
                        //                     anchors.top: parent.top
                        //                     anchors.topMargin: 50
                        //                     anchors.left: parent.left
                        //                     anchors.right: parent.right
                        //                height: 30

                        Menu {
                            id: menutest0
                            y: 40
                            visible: false
                            title: qsTr("File")

                            MenuItem {
                                text: qsTr("Open")
                                checkable: true
                                action: action_10

                                // Action for "Open" can be defined here
                            }
                            MenuItem {
                                text: qsTr("Aave")
                                checkable: true
                                action: action_11

                                // Action for "Open" can be defined here
                            }
                        }
                    }
            Button {
                id: menuBar
                text: "menu"
                onClicked: menutest.visible = true
                //                     anchors.top: parent.top
                //                     anchors.topMargin: 50
                //                     anchors.left: parent.left
                //                     anchors.right: parent.right
                //                height: 30

                Menu {
                    id: menutest
                    y: 40
                    visible: false
                    title: qsTr("File")

                    MenuItem {
                        text: qsTr("Open")
                        icon.source: "audio-headphones-symbolic"
                        onXChanged: console.log("open xchangedddd", x)
                        onYChanged: console.log("open ychangedddd", y)
                        checkable: true
                        action: action1

                        // Action for "Open" can be defined here
                    }

                    MenuItem {
                        text: qsTr("Save")
                        checkable: true
                        action: action2
                        // Action for "Save" can be defined here
                    }

                    Menu {
                        title: qsTr("Import")


                        MenuItem {
                            text: qsTr("From File 21345 536y6 y56467547")
                            icon.source: "audio-headphones-symbolic"

                            // Action for "From File" can be defined here
                            checkable: true
//                            checked: true
                            action: action_1
                        }

                        MenuItem {
                            icon.source: "audio-headphones-symbolic"

                            checkable: true

                            text: qsTr("From URL1")
                            action: action_2

                            // Action for "From URL" can be defined here
                        }
                        MenuItem {
                            icon.source: "audio-headphones-symbolic"
                            checkable: true
                            action: action_3

                            text: qsTr("From URL2 t542t564")
                            // Action for "From URL" can be defined here
                        }
                        MenuItem {
                            icon.source: "audio-headphones-symbolic"
                            checkable: true
                            action: action_4
                            text: qsTr("From URL3")
                            // Action for "From URL" can be defined here
                        }
                        MenuItem {
                            icon.source: "edit-clear-symbolic"
                            checkable: true

                            text: qsTr("From URL4")
                            action: action_5
                            // Action for "From URL" can be defined here
                        }                    MenuItem {
                            icon.source: "audio-headphones-symbolic"
                            checkable: true
                            action: action_6
                            text: qsTr("From URL5")
                            // Action for "From URL" can be defined here
                        }                    MenuItem {
                            icon.source: "audio-headphones-symbolic"
                            checkable: true
                            action: action_7
                            text: qsTr("From URL6")
                            // Action for "From URL" can be defined here
                        }                    MenuItem {
                            icon.source: "edit-clear-symbolic"
                            checkable: true
                            action: action_8
                            text: qsTr("From URL7")
                            // Action for "From URL" can be defined here
                        }                    MenuItem {
                            icon.source: "audio-headphones-symbolic"
                            checkable: true
                            action: action_9
                            text: qsTr("From URL8")
                            // Action for "From URL" can be defined here
                        }
                    }

                    MenuSeparator {} // Optional separator

                    MenuItem {
                        text: qsTr("Exit")
                        onTriggered: Qt.quit()
                    }
                }

                Component.onCompleted: {
//                    for(var i = 0; i < menu.contentModel.count; i++){
//                        console.log("menuuuuuuu", i, menu.contentData.key, menu.contentData.value)

//                    }
                }

                // Add more menus as needed
            }

            Button {
                id: menuBardisable
                //                     anchors.top: parent.top
                //                     anchors.topMargin: 50
                //                     anchors.left: parent.left
                //                     anchors.right: parent.right
                //                height: 30
                text: "disable"
                onClicked: menutestdisable.visible = true

                Menu {
                    id: menutestdisable
                    title: qsTr("Disable")
                    enabled: false
                    visible: false
                    y:40
                    MenuItem {
                        text: qsTr("Open123")
                        icon.source: "audio-headphones-symbolic"
                        onXChanged: console.log("open xchangedddd", x)
                        onYChanged: console.log("open ychangedddd", y)
                        enabled: false
                        checkable: true
                        checked: true

                        // Action for "Open" can be defined here
                    }

                    MenuItem {
                        text: qsTr("Save123")
//                        checkable: true
                        enabled: false

                        // Action for "Save" can be defined here
                    }

                }
            }




            //        TreeView {
            //            TableViewColumn {
            //                title: "Name"
            //                role: "fileName"
            //                width: 300
            //            }
            //            TableViewColumn {
            //                title: "Permissions"
            //                role: "filePermissions"
            //                width: 100
            //            }
            //            model: ["1","2","3","4"]
            //        }
        }

        ListModel {
            id: menulist
            ListElement {
                name: "Bill Smith"
                number: "555 3264"
            }
            ListElement {
                name: "John Brown"
                number: "555 8426"
            }
//            ListElement {
//                name: "Sam Wise"
//                number: "555 0473"
//            }

//            ListElement {
//                name: "1111"
//                number: "555 3264"
//            }
        }

        Timer{
            id: timer
            interval: 1000
            running: false
            onTriggered: {
                console.log("timer runnig......")
                menuModel.addItem("撤销", "undo")
//                timer1.running = true
            }
        }

        Timer{
            id: timer1
            interval: 3000
            running: false
            onTriggered: {
                console.log("timer111 runnig......")
                menuModel.removeItem();
            }
        }

        Menu {
            id: buttonMenu
//            x: -100
//            y: 100
//            width: 400
//            height: 800
            onContentItemChanged: console.log("menu contentchangeddd")

            onCountChanged: console.log("buttonMenu onCountChanged", count)

            onVisibleChanged: {
            if(visible){
            timer.running = true
            }
            }
//            width: 200
//            height: 400
//            onCountChanged: console.log("menu count changeddd")
////            onContentDataChanged: console.log("onContentDataChanged")
//            onContentHeightChanged: console.log("onContentHeightChanged")
//            onHeightChanged: console.log("onHeightChanged")
//            onContentChildrenChanged: console.log("onContentChildrenChanged")
//            onWidthChanged: console.log("mwnu width changedddd", width)
            Repeater {
                id: control
                model: menuModel
                anchors.fill: parent
                visible: false

                property int menuItemWidth: 120

                delegate: MenuItem {
                    id: menuItem
//                    width: 120
                    text: model.text
//                        Label {
//                            id: label
//                            text: menuItem.text
//                            font: menuItem.font
//                            verticalAlignment: Text.AlignVCenter
//                        }

                        Component.onCompleted: {
                            console.log("menuitem text....", text)
                            buttonMenu.addItem(menuItem)
                        }
                }
            }
        }



        //        UkuiMenu.MyMenu{
        //            id: myMenu
        //            x: 10
        //            y: 200
        //            Component.onCompleted: {
        //                myMenu.setX(10);
        //                myMenu.setY(200);

        //                myMenu.setWidth(menu0.width)
        //                myMenu.setHeight(menu0.height)
        //                myMenu.setContent(menu0.contentModel)
        //            }
        //            visible: true
        //        }

        //       T.Menu {
        //            width: 600
        //            height: 600
        //            visible: true
        //            MenuItem {
        //                text: qsTr("Open")
        //                icon.source: "ukui-down-symbolic"

        //                // Action for "Open" can be defined here
        //            }

        //            MenuItem {
        //                text: qsTr("Save")
        //                // Action for "Save" can be defined here
        //            }
        //        }



    }

    ApplicationWindow{
        id: nmenuWindow
        width: 600
        height: 600

        RowLayout{
            visible: true

                    x: 30
                    y: 200

//                    Menu {
//                        id: menutest
//                        title: qsTr("File")


//                        MenuItem {
//                            text: qsTr("Open")
//                            icon.source: "file:///home/tj/work/qt-demo/qml/testbutton/edit-clear-symbolic.svg"
//                            onXChanged: console.log("open xchangedddd", x)
//                            onYChanged: console.log("open ychangedddd", y)
//                            // Action for "Open" can be defined here
//                        }

//                        MenuItem {
//                            text: qsTr("Save")
//                            // Action for "Save" can be defined here
//                        }

//                        Menu {
//                            title: qsTr("Import")
//                        }
//                    }

                    Button{
                        text: "背景透明度为0"
                        property bool transparent: false

                        onClicked: {

                            nmymenu.popup(0,0)
//                            mymenu.forceActiveFocus()

                        }
                    }

                    MyMenu{
                        id: nmymenu
                        property bool transparent: false

                    }

                    ActionGroup {

                    id: nradioGroup

                    exclusive: true // 互斥

                    // 可以设置一个被选中的，例如第一个

                    onCheckedActionChanged: console.log("Selected:", checkedAction.text)

                    }

                    // 创建多个Action，并放入同一个ActionGroup

                    Action {

                    id: naction1

                    text: "Option 1"

                    checkable: true

                    ActionGroup.group: nradioGroup

                    }

                    Action {

                    id: naction2

                    text: "Option 2"

                    checkable: true

                    ActionGroup.group: nradioGroup

                    }
//                    ActionGroup {

//                    id: radioGroup

//                    exclusive: true // 互斥

//                    // 可以设置一个被选中的，例如第一个

//                    onCheckedActionChanged: console.log("Selected:", checkedAction.text)

//                    }

                    Action {

                    id: naction_1

                    text: "Option 2"

                    checkable: true

                    ActionGroup.group: nradioGroup

                    }
                    Action {

                    id: naction_2

                    checkable: true

                    ActionGroup.group: nradioGroup

                    }
                    Action {

                    id: naction_3

                    checkable: true

                    ActionGroup.group: nradioGroup

                    }
                    Action {

                    id: naction_4

                    checkable: true

                    ActionGroup.group: nradioGroup

                    }
                    Action {

                    id: naction_5

                    checkable: true

                    ActionGroup.group: nradioGroup
                    }
                    Action {

                    id: naction_6

                    checkable: true

                    ActionGroup.group: nradioGroup
                    }
                    Action {

                    id: naction_7

                    checkable: true

                    ActionGroup.group: nradioGroup
                    }
                    Action {

                    id: naction_8

                    checkable: true

                    ActionGroup.group: nradioGroup
                    }
                    Action {

                    id: naction_9

                    checkable: true

                    ActionGroup.group: nradioGroup
                    }
                    Action {

                    id: naction_10

                    checkable: true

                    ActionGroup.group: nradioGroup
                    }
                    Action {

                    id: naction_11

                    checkable: true

                    ActionGroup.group: nradioGroup
                    }
                    Button {
                        id: nmenuBar0
                        text: "menu0"
                        onClicked: nmenutest0.visible = true
                        //                     anchors.top: parent.top
                        //                     anchors.topMargin: 50
                        //                     anchors.left: parent.left
                        //                     anchors.right: parent.right
                        //                height: 30
                        property bool transparent: false

                        Menu {
                            id: nmenutest0
                            y: 40
                            visible: false
                            title: qsTr("File")
                            property bool transparent: false

                            MenuItem {
                                text: qsTr("Open")
                                checkable: true
                                action: naction_10
                                property bool transparent: false

                                // Action for "Open" can be defined here
                            }
                            MenuItem {
                                text: qsTr("Aave")
                                checkable: true
                                action: naction_11
                                property bool transparent: false

                                // Action for "Open" can be defined here
                            }
                        }
                    }
            Button {
                id: nmenuBar
                text: "menu"
                property bool transparent: false

                onClicked: nmenutest.visible = true
                //                     anchors.top: parent.top
                //                     anchors.topMargin: 50
                //                     anchors.left: parent.left
                //                     anchors.right: parent.right
                //                height: 30

                Menu {
                    id: nmenutest
                    y: 40
                    visible: false
                    title: qsTr("File")
                    property bool transparent: false

                    MenuItem {
                        text: qsTr("Open")
                        icon.source: "audio-headphones-symbolic"
                        onXChanged: console.log("open xchangedddd", x)
                        onYChanged: console.log("open ychangedddd", y)
                        checkable: true
                        action: naction1
                        property bool transparent: false

                        // Action for "Open" can be defined here
                    }

                    MenuItem {
                        text: qsTr("Save")
                        checkable: true
                        property bool transparent: false

                        action: naction2
                        // Action for "Save" can be defined here
                    }

                    Menu {
                        title: qsTr("Import")
                        property bool transparent: false


                        MenuItem {
                            text: qsTr("From File 21345 536y6 y56467547")
                            icon.source: "audio-headphones-symbolic"

                            // Action for "From File" can be defined here
                            checkable: true
//                            checked: true
                            action: naction_1
                            property bool transparent: false

                        }

                        MenuItem {
                            icon.source: "audio-headphones-symbolic"

                            checkable: true
                            property bool transparent: false


                            text: qsTr("From URL1")
                            action: naction_2

                            // Action for "From URL" can be defined here
                        }
                        MenuItem {
                            icon.source: "audio-headphones-symbolic"
                            checkable: true
                            action: naction_3
                            property bool transparent: false

                            text: qsTr("From URL2 t542t564")
                            // Action for "From URL" can be defined here
                        }
                        MenuItem {
                            icon.source: "audio-headphones-symbolic"
                            checkable: true
                            action: naction_4
                            property bool transparent: false

                            text: qsTr("From URL3")
                            // Action for "From URL" can be defined here
                        }
                        MenuItem {
                            icon.source: "edit-clear-symbolic"
                            checkable: true
                            property bool transparent: false

                            text: qsTr("From URL4")
                            action: naction_5
                            // Action for "From URL" can be defined here
                        }                    MenuItem {
                            icon.source: "audio-headphones-symbolic"
                            checkable: true
                            action: naction_6
                            property bool transparent: false

                            text: qsTr("From URL5")
                            // Action for "From URL" can be defined here
                        }                    MenuItem {
                            icon.source: "audio-headphones-symbolic"
                            checkable: true
                            property bool transparent: false

                            action: naction_7
                            text: qsTr("From URL6")
                            // Action for "From URL" can be defined here
                        }                    MenuItem {
                            icon.source: "edit-clear-symbolic"
                            checkable: true
                            action: naction_8
                            property bool transparent: false

                            text: qsTr("From URL7")
                            // Action for "From URL" can be defined here
                        }                    MenuItem {
                            icon.source: "audio-headphones-symbolic"
                            checkable: true
                            action: naction_9
                            property bool transparent: false

                            text: qsTr("From URL8")
                            // Action for "From URL" can be defined here
                        }
                    }

                    MenuSeparator {} // Optional separator

                    MenuItem {
                        text: qsTr("Exit")
                        onTriggered: Qt.quit()
                        property bool transparent: false

                    }
                }

                Component.onCompleted: {
//                    for(var i = 0; i < menu.contentModel.count; i++){
//                        console.log("menuuuuuuu", i, menu.contentData.key, menu.contentData.value)

//                    }
                }

                // Add more menus as needed
            }

            Button {
                id: nmenuBardisable
                //                     anchors.top: parent.top
                //                     anchors.topMargin: 50
                //                     anchors.left: parent.left
                //                     anchors.right: parent.right
                //                height: 30
                text: "disable"
                onClicked: nmenutestdisable.visible = true
                property bool transparent: false

                Menu {
                    id: nmenutestdisable
                    property bool transparent: false

                    title: qsTr("Disable")
                    enabled: false
                    visible: false
                    y:40
                    MenuItem {
                        text: qsTr("Open123")
                        icon.source: "audio-headphones-symbolic"
                        onXChanged: console.log("open xchangedddd", x)
                        onYChanged: console.log("open ychangedddd", y)
                        enabled: false
                        checkable: true
                        checked: true
                        property bool transparent: false

                        // Action for "Open" can be defined here
                    }

                    MenuItem {
                        text: qsTr("Save123")
//                        checkable: true
                        enabled: false
                        property bool transparent: false

                        // Action for "Save" can be defined here
                    }

                }
            }




            //        TreeView {
            //            TableViewColumn {
            //                title: "Name"
            //                role: "fileName"
            //                width: 300
            //            }
            //            TableViewColumn {
            //                title: "Permissions"
            //                role: "filePermissions"
            //                width: 100
            //            }
            //            model: ["1","2","3","4"]
            //        }
        }

        ListModel {
            id: nmenulist
            ListElement {
                name: "Bill Smith"
                number: "555 3264"
            }
            ListElement {
                name: "John Brown"
                number: "555 8426"
            }
//            ListElement {
//                name: "Sam Wise"
//                number: "555 0473"
//            }

//            ListElement {
//                name: "1111"
//                number: "555 3264"
//            }
        }

        Timer{
            id: ntimer
            interval: 1000
            running: false
            onTriggered: {
                console.log("timer runnig......")
                nmenuModel.addItem("撤销", "undo")
//                timer1.running = true
            }
        }

        Timer{
            id: ntimer1
            interval: 3000
            running: false
            onTriggered: {
                console.log("timer111 runnig......")
                menuModel.removeItem();
            }
        }

        Menu {
            id: nbuttonMenu
//            x: -100
//            y: 100
//            width: 400
//            height: 800
            onContentItemChanged: console.log("menu contentchangeddd")
            property bool transparent: false

            onCountChanged: console.log("buttonMenu onCountChanged", count)

            onVisibleChanged: {
            if(visible){
            ntimer.running = true
            }
            }
//            width: 200
//            height: 400
//            onCountChanged: console.log("menu count changeddd")
////            onContentDataChanged: console.log("onContentDataChanged")
//            onContentHeightChanged: console.log("onContentHeightChanged")
//            onHeightChanged: console.log("onHeightChanged")
//            onContentChildrenChanged: console.log("onContentChildrenChanged")
//            onWidthChanged: console.log("mwnu width changedddd", width)
            Repeater {
                id: ncontrol
                model: menuModel
                anchors.fill: parent
                visible: false

                property int menuItemWidth: 120

                delegate: MenuItem {
                    id: nmenuItem
//                    width: 120
                    text: model.text
//                        Label {
//                            id: label
//                            text: menuItem.text
//                            font: menuItem.font
//                            verticalAlignment: Text.AlignVCenter
//                        }

                        Component.onCompleted: {
                            console.log("menuitem text....", text)
                            nbuttonMenu.addItem(nmenuItem)
                        }
                }
            }
        }



        //        UkuiMenu.MyMenu{
        //            id: myMenu
        //            x: 10
        //            y: 200
        //            Component.onCompleted: {
        //                myMenu.setX(10);
        //                myMenu.setY(200);

        //                myMenu.setWidth(menu0.width)
        //                myMenu.setHeight(menu0.height)
        //                myMenu.setContent(menu0.contentModel)
        //            }
        //            visible: true
        //        }

        //       T.Menu {
        //            width: 600
        //            height: 600
        //            visible: true
        //            MenuItem {
        //                text: qsTr("Open")
        //                icon.source: "ukui-down-symbolic"

        //                // Action for "Open" can be defined here
        //            }

        //            MenuItem {
        //                text: qsTr("Save")
        //                // Action for "Save" can be defined here
        //            }
        //        }



    }

    ApplicationWindow{
        id: tooltipWindow
        visible: false
        width: 600
        height: 600
        color: "transparent"
//        Rectangle{
//        width: parent.width
//        height: parent.height
//        color: "red"
//       }
        Rectangle{
        anchors.fill: parent
        color: "transparent"
        }
        RowLayout{
            anchors.centerIn: parent

        Button{
            id: btn
            x: 100
            y:10
            // width: 100
            height: 36
            hoverEnabled: true
            text: "tooltip button1232332"

            ToolTip{
                id:tooltip
                text: qsTr("This is a tooltip.")
                y: 100
                delay: Qt.styleHints.mousePressAndHoldInterval
            }
            onHoveredChanged: {
                console.log("tooltip button onhoveredchangedddddd", hovered)
                if(hovered)
                    tooltip.visible = true
                else
                    tooltip.visible = false
            }
        }

        Button{
            id: btn1
            x: 200
            y:10
            width: 100
            height: 36
            hoverEnabled: true
            text: "无透明度"

            ToolTip{
                id:tooltip1
                text: qsTr("无透明度ToolTip.")
                y: 100
                property var backOpacity: 1.0
                delay: Qt.styleHints.mousePressAndHoldInterval
            }
            onHoveredChanged: {
                console.log("tooltip button onhoveredchangedddddd", hovered)
                if(hovered)
                    tooltip1.visible = true
                else
                    tooltip1.visible = false
            }
        }

        }//        Button {
//            text: qsTr("Button")
//            hoverEnabled: true

//            //ToolTip.delay: 100
//            //ToolTip.timeout: 5000
//            ToolTip.visible: pressed
//            ToolTip.text: qsTr("This tool tip is shown after hovering the button for a second.")
//            onHoveredChanged: console.log("button hoverchangedddd", hovered)
//        }

    }
    ApplicationWindow{
        id: ntooltipWindow
        visible: false
        width: 600
        height: 600

        RowLayout{
            anchors.centerIn: parent

        Button{
            id: nbtn
            x: 100
            y:10
            // width: 100
            height: 36
            hoverEnabled: true
            text: "tooltip button1232332"
            property bool transparent: false

            ToolTip{
                id:ntooltip
                text: qsTr("This is a tooltip.")
                y: 100
                delay: Qt.styleHints.mousePressAndHoldInterval
                property bool transparent: false

            }
            onHoveredChanged: {
                console.log("tooltip button onhoveredchangedddddd", hovered)
                if(hovered)
                    ntooltip.visible = true
                else
                    ntooltip.visible = false
            }
        }

        Button{
            id: nbtn1
            x: 200
            y:10
            width: 100
            height: 36
            hoverEnabled: true
            text: "无透明度"
            property bool transparent: false

            ToolTip{
                id:ntooltip1
                property bool transparent: false

                text: qsTr("无透明度ToolTip.")
                y: 100
                property var backOpacity: 1.0
                delay: Qt.styleHints.mousePressAndHoldInterval
            }
            onHoveredChanged: {
                console.log("tooltip button onhoveredchangedddddd", hovered)
                if(hovered)
                    ntooltip1.visible = true
                else
                    ntooltip1.visible = false
            }
        }

        }//        Button {
//            text: qsTr("Button")
//            hoverEnabled: true

//            //ToolTip.delay: 100
//            //ToolTip.timeout: 5000
//            ToolTip.visible: pressed
//            ToolTip.text: qsTr("This tool tip is shown after hovering the button for a second.")
//            onHoveredChanged: console.log("button hoverchangedddd", hovered)
//        }

    }

    ApplicationWindow{
        id: switchWindow
        visible: false
        width: 600
        height: 600
        color: "transparent"
        Rectangle{
        anchors.fill: parent
        color: "transparent"
        }
        ColumnLayout{
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.centerIn: parent

            Switch{
                text: "Switch 01"
            }
            Switch{
                text: "Switch 02"
            }
            Switch{
                text: "Switch 03"
            }
            Switch{
                text: "Switch disbale"
                enabled: false
            }
            Switch{
                text: "Switch disbale"
                checkable: true
                checked: true
                enabled: false
            }
        }
    }
    ApplicationWindow{
        id: nswitchWindow
        visible: false
        width: 600
        height: 600

        ColumnLayout{
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.centerIn: parent

            Switch{
                property bool transparent: false

                text: "Switch 01"
            }
            Switch{
                property bool transparent: false

                text: "Switch 02"
            }
            Switch{
                property bool transparent: false

                text: "Switch 03"
            }
            Switch{
                property bool transparent: false

                text: "Switch disbale"
                enabled: false
            }
            Switch{
                property bool transparent: false

                text: "Switch disbale"
                checkable: true
                checked: true
                enabled: false
            }
        }
    }



    ApplicationWindow{
        id: switchDelegateWindow
        visible: false
        width: 600
        height: 600
        color: "transparent"
        Rectangle{
        anchors.fill: parent
        color: "transparent"
        }
        ColumnLayout{
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.centerIn: parent

            SwitchDelegate{
                text: "SwitchDelegate 01"
            }
            SwitchDelegate{
                text: "SwitchDelegate 02"
            }
            SwitchDelegate{
                text: "SwitchDelegate 03"
            }
            SwitchDelegate{
                text: "SwitchDelegate disbale"
                enabled: false
            }
            SwitchDelegate{
                text: "SwitchDelegate disbale"
                checkable: true
                checked: true
                enabled: false
            }
        }
    }

    ApplicationWindow{
        id: progressbarWindow
        visible: false
        width: 600
        height: 600
        color: "transparent"
        Rectangle{
        anchors.fill: parent
        color: "transparent"
        }
        ColumnLayout{
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.centerIn: parent

            spacing: 30
            ProgressBar{
                value: 10
                to: 100
                from: 0
            }
            ProgressBar{
                indeterminate: true

            }
            ProgressBar{
                value: 70
                to: 100
                from: 0

            }
        }
    }
    ApplicationWindow{
        id: nprogressbarWindow
        visible: false
        width: 600
        height: 600

        ColumnLayout{
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.centerIn: parent

            spacing: 30
            ProgressBar{
                value: 10
                to: 100
                from: 0
                property bool transparent: false

            }
            ProgressBar{
                indeterminate: true
                property bool transparent: false

            }
            ProgressBar{
                value: 70
                to: 100
                from: 0
                property bool transparent: false

            }
        }
    }

    ApplicationWindow{
        id: roundbuttonWindow
        visible: false
        width: 600
        height: 600
        color: "transparent"
        Rectangle{
        anchors.fill: parent
        color: "transparent"
        }
        // ColumnLayout{
//            anchors.horizontalCenter: parent.horizontalCenter
            RoundButton{
                width: 60
                height: 60
                x: 10
                y:10
                text: "01"
            }

            RoundButton{
                width: 36
                height: 36
                x: 10
                y: 80
                // text: "01"
                icon.source: "ukui-down-symbolic"
            }
            RoundButton{
                text: "r02"
                x: 10
                   y: 120

            }
            RoundButton{
                text: "roundBtn"
                x: 10
                y:200
                //onClicked: testclose.visible = true

            }
            RoundButton{
                x: 10
                y:250
                width: 36
                height: 36
                icon{
                    name:"edit-clear-symbolic"

                }
                flat: true
            }
            RoundButton{
                enabled: false
                x: 10
                y: 300
                width: 36
                height: 36
                icon{
                    name:"edit-clear-symbolic"

                }
            }
            RoundButton{
                x: 10
                y: 350
                width: 36
                height: 36
                icon{
                    name:"edit-clear-symbolic"

                }
                flat: true
                enabled: false
            }


//            RoundButton{
//                id: testclose
//                x: 10
//                y: 250
//                //text: "closeButton"
//                property var buttonType: "closeButton"
//                icon{//主题图标
//                    source:"image://imageProvider/qrc:/12345.svg"

//                }//"ukui-down-symbolic"
//                visible: false

//                onImplicitWidthChanged: console.log("roundbutton width changedddd", implicitWidth)
//                onWidthChanged: console.log("roundbutton width onWidthChanged", width)
//            }
        // }
    }
    ApplicationWindow{
        id: nroundbuttonWindow
        visible: false
        width: 600
        height: 600

        // ColumnLayout{
//            anchors.horizontalCenter: parent.horizontalCenter
            RoundButton{
                width: 60
                height: 60
                x: 10
                y:10
                text: "01"
                property bool transparent: false

            }

            RoundButton{
                width: 36
                height: 36
                x: 10
                y: 80
                // text: "01"
                icon.source: "ukui-down-symbolic"
                property bool transparent: false

            }
            RoundButton{
                text: "r02"
                x: 10
                   y: 120
                   property bool transparent: false

            }
            RoundButton{
                text: "roundBtn"
                x: 10
                y:200
                //onClicked: testclose.visible = true
                property bool transparent: false

            }
            RoundButton{
                x: 10
                y:250
                width: 36
                height: 36
                icon{
                    name:"edit-clear-symbolic"

                }
                flat: true
                property bool transparent: false

            }
            RoundButton{
                enabled: false
                x: 10
                y: 300
                width: 36
                height: 36
                icon{
                    name:"edit-clear-symbolic"

                }
                property bool transparent: false

            }
            RoundButton{
                x: 10
                y: 350
                width: 36
                height: 36
                icon{
                    name:"edit-clear-symbolic"

                }
                flat: true
                enabled: false
                property bool transparent: false

            }


//            RoundButton{
//                id: testclose
//                x: 10
//                y: 250
//                //text: "closeButton"
//                property var buttonType: "closeButton"
//                icon{//主题图标
//                    source:"image://imageProvider/qrc:/12345.svg"

//                }//"ukui-down-symbolic"
//                visible: false

//                onImplicitWidthChanged: console.log("roundbutton width changedddd", implicitWidth)
//                onWidthChanged: console.log("roundbutton width onWidthChanged", width)
//            }
        // }
    }

    ApplicationWindow{
        id: scrollbarWindow
        visible: false
        width: 600
        height: 600
        color: "transparent"
        Rectangle{
        anchors.fill: parent
        color: "transparent"
        }
        Rectangle {
            x: 400
            y: 40
            id: frame
            clip: true
            width: 160
            height: 160
            border.color: "transparent"

            Text {
                id: content
                text: "ABC"
                font.pixelSize: 160
                x: -hbar.position * width
                y: -vbar.position * height
            }

            ScrollBar {
                id: vbar
                hoverEnabled: true
                active: hovered || pressed
                orientation: Qt.Vertical
                size: frame.height / content.height
                anchors.top: parent.top
                anchors.right: parent.right
                anchors.bottom: parent.bottom
            }

            ScrollBar {
                id: hbar
                hoverEnabled: true
                active: hovered || pressed
                orientation: Qt.Horizontal
                size: frame.width / content.width
                anchors.left: parent.left
                anchors.right: parent.right
                anchors.bottom: parent.bottom
            }
        }
        Rectangle {
            x: 100
            y: 20
            id: frame1
            clip: true
            width: 160
            height: 160
            color: "transparent"

            Text {
                id: content1
                text: "disable"
                font.pixelSize: 140
                x: -hbar1.position * width
                y: -vbar1.position * height

            }

            ScrollBar {
                id: vbar1
                hoverEnabled: true
                active: hovered || pressed
                orientation: Qt.Vertical
                size: frame1.height / content1.height
                anchors.top: parent.top
                anchors.right: parent.right
                anchors.bottom: parent.bottom
            }

            ScrollBar {
                id: hbar1
                hoverEnabled: true
                active: hovered || pressed
                orientation: Qt.Horizontal
                size: frame1.width / content1.width
                anchors.left: parent.left
                anchors.right: parent.right
                anchors.bottom: parent.bottom
                enabled: false
            }
        }


//        ScrollView{
//            x: 0
//        width: 400
//        height: 800
//        ScrollBar.vertical.policy:{
//        scrollbarviewlist.contentHeight > scrollbarviewlist.height ? ScrollBar.AlwaysOn : ScrollBar.AlwaysOff
//        }
//        ListModel {
//            id: scrolllist
//            ListElement {
//                name: "Bill Smith"
//                number: "555 3264"
//            }
//            ListElement {
//                name: "John Brown"
//                number: "555 8426"
//            }
//            ListElement {
//                name: "Sam Wise"
//                number: "555 0473"
//            }

//            ListElement {
//                name: "Bill Smith"
//                number: "555 3264"
//            }
//            ListElement {
//                name: "John Brown"
//                number: "555 8426"
//            }
//            ListElement {
//                name: "Sam Wise"
//                number: "555 0473"
//            }
//            ListElement {
//                name: "Bill Smith"
//                number: "555 3264"
//            }
//            ListElement {
//                name: "John Brown"
//                number: "555 8426"
//            }
//            ListElement {
//                name: "Sam Wise"
//                number: "555 0473"
//            }

//            ListElement {
//                name: "Bill Smith"
//                number: "555 3264"
//            }
//            ListElement {
//                name: "John Brown"
//                number: "555 8426"
//            }
//            ListElement {
//                name: "Sam Wise"
//                number: "555 0473"
//            }            ListElement {
//                name: "Bill Smith"
//                number: "555 3264"
//            }
//            ListElement {
//                name: "John Brown"
//                number: "555 8426"
//            }
//            ListElement {
//                name: "Sam Wise"
//                number: "555 0473"
//            }

//            ListElement {
//                name: "Bill Smith"
//                number: "555 3264"
//            }
//            ListElement {
//                name: "John Brown"
//                number: "555 8426"
//            }
//            ListElement {
//                name: "Sam Wise"
//                number: "555 0473"
//            }            ListElement {
//                name: "Bill Smith"
//                number: "555 3264"
//            }
//            ListElement {
//                name: "John Brown"
//                number: "555 8426"
//            }
//            ListElement {
//                name: "Sam Wise"
//                number: "555 0473"
//            }

//            ListElement {
//                name: "Bill Smith"
//                number: "555 3264"
//            }
//            ListElement {
//                name: "John Brown"
//                number: "555 8426"
//            }
//            ListElement {
//                name: "Sam Wise"
//                number: "555 0473"
//            }            ListElement {
//                name: "Bill Smith"
//                number: "555 3264"
//            }
//            ListElement {
//                name: "John Brown"
//                number: "555 8426"
//            }
//            ListElement {
//                name: "Sam Wise"
//                number: "555 0473"
//            }

//            ListElement {
//                name: "Bill Smith"
//                number: "555 3264"
//            }
//            ListElement {
//                name: "John Brown"
//                number: "555 8426"
//            }
//            ListElement {
//                name: "Sam Wise"
//                number: "555 0473"
//            }            ListElement {
//                name: "Bill Smith"
//                number: "555 3264"
//            }
//            ListElement {
//                name: "John Brown"
//                number: "555 8426"
//            }
//            ListElement {
//                name: "Sam Wise"
//                number: "555 0473"
//            }

//            ListElement {
//                name: "Bill Smith"
//                number: "555 3264"
//            }
//            ListElement {
//                name: "John Brown"
//                number: "555 8426"
//            }
//            ListElement {
//                name: "Sam Wise"
//                number: "555 0473"
//            }            ListElement {
//                name: "Bill Smith"
//                number: "555 3264"
//            }
//            ListElement {
//                name: "John Brown"
//                number: "555 8426"
//            }
//            ListElement {
//                name: "Sam Wise"
//                number: "555 0473"
//            }

//            ListElement {
//                name: "Bill Smith"
//                number: "555 3264"
//            }
//            ListElement {
//                name: "John Brown"
//                number: "555 8426"
//            }
//            ListElement {
//                name: "Sam Wise"
//                number: "555 0473"
//            }            ListElement {
//                name: "Bill Smith"
//                number: "555 3264"
//            }
//            ListElement {
//                name: "John Brown"
//                number: "555 8426"
//            }
//            ListElement {
//                name: "Sam Wise"
//                number: "555 0473"
//            }

//            ListElement {
//                name: "Bill Smith"
//                number: "555 3264"
//            }
//            ListElement {
//                name: "John Brown"
//                number: "555 8426"
//            }
//            ListElement {
//                name: "Sam Wise"
//                number: "555 0473"
//            }
//        }

//        ListView {
//            id: scrollbarviewlist

//            anchors.fill: parent
//            clip: true
//            model: scrolllist
//            //            Keys.enabled: true
//            //            Keys.onPressed: {
//            //            console.log("pressedddd", event.key)
//            //            }
//            delegate: ItemDelegate {
//                width: 300
//                hoverEnabled: true
//                text: name + ": " + number
//            }
//        }
//        }

//        ColumnLayout{
//            anchors.horizontalCenter: parent.horizontalCenter
//            ScrollBar{
//                width: 20
//                height: 100
//                orientation: Qt.Vertical
//                x: 10
//                   y: 10
//            }
//            ScrollBar{
//                width: 20
//                height: 100
//                orientation: Qt.Vertical
//                x: 100
//                   y: 10
//            }
//            ScrollBar{
//                width: 20
//                height: 100
//                orientation: Qt.Vertical
//                x: 200
//                   y: 10

//            }
//        }
    }
    ApplicationWindow{
        id: nscrollbarWindow
        visible: false
        width: 600
        height: 600

        Rectangle {
            x: 400
            y: 40
            id: nframe
            clip: true
            width: 160
            height: 160

            Text {
                id: ncontent
                text: "ABC"
                font.pixelSize: 160
                x: -nhbar.position * width
                y: -nvbar.position * height
            }

            ScrollBar {
                id: nvbar
                hoverEnabled: true
                active: hovered || pressed
                orientation: Qt.Vertical
                size: nframe.height / content.height
                anchors.top: parent.top
                anchors.right: parent.right
                anchors.bottom: parent.bottom
                property bool transparent: false

            }

            ScrollBar {
                id: nhbar
                hoverEnabled: true
                active: hovered || pressed
                orientation: Qt.Horizontal
                size: nframe.width / ncontent.width
                anchors.left: parent.left
                anchors.right: parent.right
                anchors.bottom: parent.bottom
                property bool transparent: false

            }
        }
        Rectangle {
            x: 100
            y: 20
            id: nframe1
            clip: true
            width: 160
            height: 160

            Text {
                id: ncontent1
                text: "disable"
                font.pixelSize: 140
                x: -nhbar1.position * width
                y: -nvbar1.position * height

            }

            ScrollBar {
                id: nvbar1
                hoverEnabled: true
                active: hovered || pressed
                orientation: Qt.Vertical
                size: nframe1.height / ncontent1.height
                anchors.top: parent.top
                anchors.right: parent.right
                anchors.bottom: parent.bottom
                property bool transparent: false

            }

            ScrollBar {
                id: nhbar1
                hoverEnabled: true
                active: hovered || pressed
                orientation: Qt.Horizontal
                size: nframe1.width / ncontent1.width
                anchors.left: parent.left
                anchors.right: parent.right
                anchors.bottom: parent.bottom
                enabled: false
                property bool transparent: false

            }
        }


//        ScrollView{
//            x: 0
//        width: 400
//        height: 800
//        ScrollBar.vertical.policy:{
//        scrollbarviewlist.contentHeight > scrollbarviewlist.height ? ScrollBar.AlwaysOn : ScrollBar.AlwaysOff
//        }
//        ListModel {
//            id: scrolllist
//            ListElement {
//                name: "Bill Smith"
//                number: "555 3264"
//            }
//            ListElement {
//                name: "John Brown"
//                number: "555 8426"
//            }
//            ListElement {
//                name: "Sam Wise"
//                number: "555 0473"
//            }

//            ListElement {
//                name: "Bill Smith"
//                number: "555 3264"
//            }
//            ListElement {
//                name: "John Brown"
//                number: "555 8426"
//            }
//            ListElement {
//                name: "Sam Wise"
//                number: "555 0473"
//            }
//            ListElement {
//                name: "Bill Smith"
//                number: "555 3264"
//            }
//            ListElement {
//                name: "John Brown"
//                number: "555 8426"
//            }
//            ListElement {
//                name: "Sam Wise"
//                number: "555 0473"
//            }

//            ListElement {
//                name: "Bill Smith"
//                number: "555 3264"
//            }
//            ListElement {
//                name: "John Brown"
//                number: "555 8426"
//            }
//            ListElement {
//                name: "Sam Wise"
//                number: "555 0473"
//            }            ListElement {
//                name: "Bill Smith"
//                number: "555 3264"
//            }
//            ListElement {
//                name: "John Brown"
//                number: "555 8426"
//            }
//            ListElement {
//                name: "Sam Wise"
//                number: "555 0473"
//            }

//            ListElement {
//                name: "Bill Smith"
//                number: "555 3264"
//            }
//            ListElement {
//                name: "John Brown"
//                number: "555 8426"
//            }
//            ListElement {
//                name: "Sam Wise"
//                number: "555 0473"
//            }            ListElement {
//                name: "Bill Smith"
//                number: "555 3264"
//            }
//            ListElement {
//                name: "John Brown"
//                number: "555 8426"
//            }
//            ListElement {
//                name: "Sam Wise"
//                number: "555 0473"
//            }

//            ListElement {
//                name: "Bill Smith"
//                number: "555 3264"
//            }
//            ListElement {
//                name: "John Brown"
//                number: "555 8426"
//            }
//            ListElement {
//                name: "Sam Wise"
//                number: "555 0473"
//            }            ListElement {
//                name: "Bill Smith"
//                number: "555 3264"
//            }
//            ListElement {
//                name: "John Brown"
//                number: "555 8426"
//            }
//            ListElement {
//                name: "Sam Wise"
//                number: "555 0473"
//            }

//            ListElement {
//                name: "Bill Smith"
//                number: "555 3264"
//            }
//            ListElement {
//                name: "John Brown"
//                number: "555 8426"
//            }
//            ListElement {
//                name: "Sam Wise"
//                number: "555 0473"
//            }            ListElement {
//                name: "Bill Smith"
//                number: "555 3264"
//            }
//            ListElement {
//                name: "John Brown"
//                number: "555 8426"
//            }
//            ListElement {
//                name: "Sam Wise"
//                number: "555 0473"
//            }

//            ListElement {
//                name: "Bill Smith"
//                number: "555 3264"
//            }
//            ListElement {
//                name: "John Brown"
//                number: "555 8426"
//            }
//            ListElement {
//                name: "Sam Wise"
//                number: "555 0473"
//            }            ListElement {
//                name: "Bill Smith"
//                number: "555 3264"
//            }
//            ListElement {
//                name: "John Brown"
//                number: "555 8426"
//            }
//            ListElement {
//                name: "Sam Wise"
//                number: "555 0473"
//            }

//            ListElement {
//                name: "Bill Smith"
//                number: "555 3264"
//            }
//            ListElement {
//                name: "John Brown"
//                number: "555 8426"
//            }
//            ListElement {
//                name: "Sam Wise"
//                number: "555 0473"
//            }            ListElement {
//                name: "Bill Smith"
//                number: "555 3264"
//            }
//            ListElement {
//                name: "John Brown"
//                number: "555 8426"
//            }
//            ListElement {
//                name: "Sam Wise"
//                number: "555 0473"
//            }

//            ListElement {
//                name: "Bill Smith"
//                number: "555 3264"
//            }
//            ListElement {
//                name: "John Brown"
//                number: "555 8426"
//            }
//            ListElement {
//                name: "Sam Wise"
//                number: "555 0473"
//            }
//        }

//        ListView {
//            id: scrollbarviewlist

//            anchors.fill: parent
//            clip: true
//            model: scrolllist
//            //            Keys.enabled: true
//            //            Keys.onPressed: {
//            //            console.log("pressedddd", event.key)
//            //            }
//            delegate: ItemDelegate {
//                width: 300
//                hoverEnabled: true
//                text: name + ": " + number
//            }
//        }
//        }

//        ColumnLayout{
//            anchors.horizontalCenter: parent.horizontalCenter
//            ScrollBar{
//                width: 20
//                height: 100
//                orientation: Qt.Vertical
//                x: 10
//                   y: 10
//            }
//            ScrollBar{
//                width: 20
//                height: 100
//                orientation: Qt.Vertical
//                x: 100
//                   y: 10
//            }
//            ScrollBar{
//                width: 20
//                height: 100
//                orientation: Qt.Vertical
//                x: 200
//                   y: 10

//            }
//        }
    }

    ApplicationWindow{
        id: sliderWindow
        visible: false
        width: 600
        height: 800
        color: "transparent"
        Rectangle{
        anchors.fill: parent
        color: "transparent"
        }
        ColumnLayout{
            anchors.horizontalCenter: parent.horizontalCenter
            Slider{
                orientation: Qt.Vertical

            }
            Slider{
                from: 0
                to:100
                value: 20
            }
            Slider{
                from: 0
                to:100
                value: 60
            }
            Slider{
                from: 0
                to:100
                value: 40
                enabled: false
            }

            Slider{
                from: 0
                to:100
                value: 40
                property var sliderType: "touchSlider"
            }

            Slider{
                from: 0
                to:100
                value: 0
                property var sliderType: "touchSlider"
            }
            Slider{
                from: 0
                to:100
                value: 20
                enabled: false
                property var sliderType: "touchSlider"
            }
            Slider{
                from: 0
                to:100
                value: 100
                property var sliderType: "touchSlider"
            }

            RowLayout{
            Slider{
                from: 0
                to:100
                value: 40
                orientation: Qt.Vertical

                property var sliderType: "touchSlider"
            }
            Slider{
                id:s1
                from: 0
                to:100
                value: 0
                orientation: Qt.Vertical

                property var sliderType: "touchSlider"
//                Component.onCompleted: {
//                    console.log("s11111")
//                    console.log("s1 visualposition..." << s1.visualPosition)
//                }
            }
            Slider{
                id: s2
                from: 0
                to:100
                value: 100
                orientation: Qt.Vertical

                property var sliderType: "touchSlider"
//                Component.onCompleted: console.log("s2 visualposition..." << s2.visualPosition)

            }
            }
        }
    }
    ApplicationWindow{
        id: nsliderWindow
        visible: false
        width: 600
        height: 800

        ColumnLayout{
            anchors.horizontalCenter: parent.horizontalCenter
            Slider{
                orientation: Qt.Vertical
                property bool transparent: false

            }
            Slider{
                from: 0
                to:100
                value: 20
                property bool transparent: false

            }
            Slider{
                from: 0
                to:100
                value: 60
                property bool transparent: false

            }
            Slider{
                from: 0
                to:100
                value: 40
                enabled: false
                property bool transparent: false

            }

            Slider{
                from: 0
                to:100
                value: 40
                property bool transparent: false

                property var sliderType: "touchSlider"
            }

            Slider{
                from: 0
                to:100
                property bool transparent: false

                value: 0
                property var sliderType: "touchSlider"
            }
            Slider{
                from: 0
                to:100
                value: 20
                enabled: false
                property bool transparent: false

                property var sliderType: "touchSlider"
            }
            Slider{
                from: 0
                to:100
                value: 100
                property bool transparent: false

                property var sliderType: "touchSlider"
            }

            RowLayout{
            Slider{
                from: 0
                to:100
                value: 40
                orientation: Qt.Vertical
                property bool transparent: false

                property var sliderType: "touchSlider"
            }
            Slider{
                id:ns1
                from: 0
                to:100
                value: 0
                orientation: Qt.Vertical
                property bool transparent: false

                property var sliderType: "touchSlider"
//                Component.onCompleted: {
//                    console.log("s11111")
//                    console.log("s1 visualposition..." << s1.visualPosition)
//                }
            }
            Slider{
                id: ns2
                from: 0
                to:100
                value: 100
                orientation: Qt.Vertical
                property bool transparent: false

                property var sliderType: "touchSlider"
//                Component.onCompleted: console.log("s2 visualposition..." << s2.visualPosition)

            }
            }
        }
    }

    ApplicationWindow{
        id: spinboxWindow
        visible: false
        width: 600
        height: 600
        color: "transparent"
        Rectangle{
        anchors.fill: parent
        color: "transparent"
        }
        ColumnLayout{
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.centerIn: parent

            SpinBox{
                editable: true
                from: 0
                to: 10000
            }
            SpinBox{
                editable: true
                from: 0
                to: 10000

                value: 10
                enabled: false
            }
            SpinBox{
                editable: false
                from: 0
                to: 10000

            }
            // DoubleSpinBox.qml
            SpinBox {
                id: doubleSpinbox
                // 公共属性
                property int decimals: 2     // 小数位数
                property real realValue: 0.0 // 实际数值
                property real realFrom: 0.0  // 最小值
                property real realTo: 100.0  // 最大值
                property real realStep: 0.1  // 步长

                // 内部转换系数
                property int scaleFactor: Math.pow(10, decimals)

                // 绑定到基础属性
                from: realFrom * scaleFactor
                to: realTo * scaleFactor
                stepSize: realStep * scaleFactor
                value: realValue * scaleFactor

                // 格式化显示
                textFromValue: function(value, locale) {
                    return Number(value / scaleFactor).toFixed(decimals)
                }

                // 值变化处理
                onValueModified: {
                    realValue = value / scaleFactor
                }

                // 输入验证器
                validator: DoubleValidator {
                    bottom: doubleSpinbox.realFrom
                    top: doubleSpinbox.realTo
                    decimals: doubleSpinbox.decimals
                    notation: DoubleValidator.StandardNotation
                }

                // 键盘输入限制（避免误输入）
                inputMethodHints: Qt.ImhFormattedNumbersOnly
            }
        }
    }
    ApplicationWindow{
        id: nspinboxWindow
        visible: false
        width: 600
        height: 600

        ColumnLayout{
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.centerIn: parent

            SpinBox{
                editable: true
                from: 0
                to: 10000
                property bool transparent: false

            }
            SpinBox{
                editable: true
                from: 0
                to: 10000
                property bool transparent: false

                value: 10
                enabled: false
            }
            SpinBox{
                editable: false
                from: 0
                to: 10000
                property bool transparent: false

            }
            // DoubleSpinBox.qml
            SpinBox {
                id: ndoubleSpinbox
                // 公共属性
                property int decimals: 2     // 小数位数
                property real realValue: 0.0 // 实际数值
                property real realFrom: 0.0  // 最小值
                property real realTo: 100.0  // 最大值
                property real realStep: 0.1  // 步长
                property bool transparent: false

                // 内部转换系数
                property int scaleFactor: Math.pow(10, decimals)

                // 绑定到基础属性
                from: realFrom * scaleFactor
                to: realTo * scaleFactor
                stepSize: realStep * scaleFactor
                value: realValue * scaleFactor

                // 格式化显示
                textFromValue: function(value, locale) {
                    return Number(value / scaleFactor).toFixed(decimals)
                }

                // 值变化处理
                onValueModified: {
                    realValue = value / scaleFactor
                }

                // 输入验证器
                validator: DoubleValidator {
                    bottom: doubleSpinbox.realFrom
                    top: doubleSpinbox.realTo
                    decimals: doubleSpinbox.decimals
                    notation: DoubleValidator.StandardNotation
                }

                // 键盘输入限制（避免误输入）
                inputMethodHints: Qt.ImhFormattedNumbersOnly
            }
        }
    }

    /*
    ApplicationWindow{
        id: tabbarWindow
        visible: false
        width: 600
        height: 600
        color: "transparent"

        Rectangle{
        anchors.fill: parent
        color: "transparent"
        }
        TabBar {
            id: tabbar
            x: 10
            Component.onCompleted: console.log("main tabbr...", tabbar.width)
            width: 600
            height: tabBtn.height
            //                background: Rectangle{
            //                    color: "red"
            //                    implicitWidth: tabbar.width
            //                    implicitHeight: tabbar.height
            //                }
            spacing: 0
            onWidthChanged: console.log("tabbar widthchangedddddd", tabbar.width)
            clip: true
            TabButton {
                anchors.verticalCenter: parent.verticalCenter
                id: tabBtn
                text: qsTr("Home")
                width: 150
                RoundButton{
                    width: 30
                    height: 30
                    anchors.right: parent.right
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.rightMargin: 8
                    flat: true
                    visible: true
                    icon.source: "window-close-symbolic"

                }
            }
            TabButton {
                anchors.verticalCenter: parent.verticalCenter
                width: 150

                text: qsTr("Discover")
                RoundButton{
                    width: 30
                    height: 30
                    anchors.right: parent.right
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.rightMargin: 8
                    flat: true
                    visible: true
                    icon.source: "window-close-symbolic"

                }
            }
            TabButton {
                anchors.verticalCenter: parent.verticalCenter
                width: 150

                text: qsTr("Activity")
                RoundButton{
                    width: 30
                    height: 30
                    anchors.right: parent.right
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.rightMargin: 8
                    flat: true
                    visible: true
                    icon.source: "window-close-symbolic"

                }
            }

        }
    }
    */
    ApplicationWindow{
        id: comboboxWindow
        visible: false
        width: 1000
        height: 600
        color: "transparent"
        Rectangle{
        anchors.fill: parent
        color: "transparent"
        }

        RowLayout{
            anchors.horizontalCenter: parent.horizontalCenter

            ComboBox{
                editable: true


            model: ["123", "321", "hello", "1111111111111"]
            }

            ComboBox{
                enabled: false

            model: ["123", "321", "hello", "1111111111111"]
            }
//            ComboBox{
//                textRole: "text"
//            model: ListModel{
//                ListElement{text : "11111 enable"; }
//                ListElement{text : "22222 enable"; enabled: false}
//                ListElement{text : "33333 enable"; enabled: false}
//            }
//            }

            ComboBox{
            model: ListModel{
                ListElement{text : "11111"}
                ListElement{text : "22222"}
                ListElement{text : "33333"}
                ListElement{text : "444444"}
                ListElement{text : "555555"}
                ListElement{text : "555555"}
                ListElement{text : "555555"}
                ListElement{text : "555555"}
                ListElement{text : "555555"}
                ListElement{text : "555555"}
                ListElement{text : "555555"}
                ListElement{text : "555555"}
                ListElement{text : "555555"}
                ListElement{text : "555555"}
                ListElement{text : "555555"}
                ListElement{text : "555555"}
                ListElement{text : "555555"}
                ListElement{text : "555555"}
                ListElement{text : "555555"}
                ListElement{text : "555555"}
                ListElement{text : "555555"}
                ListElement{text : "555555"}
                ListElement{text : "555555"}
                ListElement{text : "555555"}
                ListElement{text : "555555"}
                ListElement{text : "555555"}
                ListElement{text : "555555"}
                ListElement{text : "555555"}
                ListElement{text : "0000000"}

            }
            }
        }
    }
    ApplicationWindow{
        id: ncomboboxWindow
        visible: false
        width: 1000
        height: 600


        RowLayout{
            anchors.horizontalCenter: parent.horizontalCenter
            ComboBox{
                editable: true
                property bool transparent: false


            model: ["123", "321", "hello", "1111111111111"]
            }

            ComboBox{
                enabled: false
                property bool transparent: false

            model: ["123", "321", "hello", "1111111111111"]
            }
//            ComboBox{
//                textRole: "text"
//            model: ListModel{
//                ListElement{text : "11111 enable"; }
//                ListElement{text : "22222 enable"; enabled: false}
//                ListElement{text : "33333 enable"; enabled: false}
//            }
//            }

            ComboBox{
                property bool transparent: false

            model: ListModel{
                ListElement{text : "11111"}
                ListElement{text : "22222"}
                ListElement{text : "33333"}
                ListElement{text : "444444"}
                ListElement{text : "555555"}
                ListElement{text : "555555"}
                ListElement{text : "555555"}
                ListElement{text : "555555"}
                ListElement{text : "555555"}
                ListElement{text : "555555"}
                ListElement{text : "555555"}
                ListElement{text : "555555"}
                ListElement{text : "555555"}
                ListElement{text : "555555"}
                ListElement{text : "555555"}
                ListElement{text : "555555"}
                ListElement{text : "555555"}
                ListElement{text : "555555"}
                ListElement{text : "555555"}
                ListElement{text : "555555"}
                ListElement{text : "555555"}
                ListElement{text : "555555"}
                ListElement{text : "555555"}
                ListElement{text : "555555"}
                ListElement{text : "555555"}
                ListElement{text : "555555"}
                ListElement{text : "555555"}
                ListElement{text : "555555"}
                ListElement{text : "0000000"}

            }
            }
        }
    }

    ApplicationWindow{
        id: labelWindow
        visible: false
        width: 600
        height: 600
        color: "transparent"
        Rectangle{
        anchors.fill: parent
        color: "transparent"
        }
        onFontChanged: console.log("appwindow font changedddd", font)

        ColumnLayout{
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.centerIn: parent

            Label{
                text: "1111111111111"
                onFontChanged: console.log("label font changeeee", font)
            }
            Label{
                text: "disable"
                enabled: false
            }
            // Text{
            //     text: "istext"
            //     onFontChanged: console.log("text font changeeee", font)


            // }
        }
    }

    ApplicationWindow{
        id: nlabelWindow
        visible: false
        width: 600
        height: 600

        onFontChanged: console.log("appwindow font changedddd", font)

        ColumnLayout{
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.centerIn: parent

            Label{
                text: "1111111111111"
                onFontChanged: console.log("label font changeeee", font)
            }
            Label{
                text: "disable"
                enabled: false
            }
            // Text{
            //     text: "istext"
            //     onFontChanged: console.log("text font changeeee", font)


            // }
        }
    }

    ApplicationWindow{
        id:listWindow
        visible: false
            height: 1000
            width: 1000
            color: "transparent"
            Rectangle{
            anchors.fill: parent
            color: "transparent"
            }
        ListModel {
            id: list
            ListElement {
                name: "Bill Smith"
                number: "555 3264"
            }
            ListElement {
                name: "John Brown"
                number: "555 8426"
            }
            ListElement {
                name: "Sam Wise"
                number: "555 0473"
            }
            ListElement {
                name: "Sam Wise123"
                number: "555 0473 fw"
            }
        }
        ListModel {
            id: list1
            ListElement {
                name: "Bill Smith"
                number: "555 3264"
            }
            ListElement {
                name: "John Brown"
                number: "555 8426"
            }
            ListElement {
                name: "Sam Wise"
                number: "555 0473"
            }
            ListElement {
                name: "Sam Wise weg"
                number: "555 0473 g"
            }
        }
        ListModel {
            id: list2
            ListElement {
                name: "Bill Smith"
                number: "555 3264"
            }
            ListElement {
                name: "John Brown"
                number: "555 8426"
            }
            ListElement {
                name: "Sam Wise"
                number: "555 0473"
            }
            ListElement {
                name: "Sam Wise dgf"
                number: "555 0473fg"
            }
        }
        GridLayout{
            anchors.fill: parent
            rowSpacing: 30
            columnSpacing: 30
            columns: 3
        ListView {
            width: 300;
            height: 150

            model: list
//            Keys.enabled: true
//            Keys.onPressed: {
//            console.log("pressedddd", event.key)
//            }
            delegate: ItemDelegate {
                width: 300
                height: 36

//                contentItem: CheckDelegate{
//                text: parent.text
//                height: parent.height
//                icon.source: "audio-headphones-symbolic"
//                }
                // width: 200
                hoverEnabled: true
                text: name + ": " + number
            }
        }
        ListView {
            width: 300; height: 150

            model: list
            delegate: ItemDelegate {
                height: 36
                implicitWidth: parent.width
                text: name + ": " + number + "交替行"
                property var alternate: true


//                contentItem: CheckDelegate{
//                text: parent.text
//                height: parent.height
//                icon.source: "audio-headphones-symbolic"

//                }
            }
        }

        ListView {
            width: 300; height: 150

            model: list
            delegate: ItemDelegate {
                width: 300
                checkable: true
                text: name + ": " + number
                onCheckedChanged:{
                    if(checked !== cd3.checked)
                        cd3.checked = checked
                    console.log("checkedchangeddd", checked)
                }

                height: 36
//                contentItem: CheckDelegate{
//                    id :cd3
//                text: parent.text
//                height: parent.height
//                icon.source: "audio-headphones-symbolic"
////                checked: parent.checked
//                onCheckedChanged: {
//                    if(checked !== parent.checked)
//                        parent.checked = checked
//                }
//                }
            }
        }
        ListView {
            width: 300; height: 150

            model: list
            delegate: ItemDelegate {
                width: 300
                highlighted: true
                checkable: true
                text: name + ": " + number
                height: 36
            }
        }
        ListView {
            width: 300; height: 150
            enabled: false

            model: list
            delegate: ItemDelegate {
                width: 300
                text: name + ": " + number + "交替行 disabel"
                property var alternate: true
                onClicked: {
                }
            }
        }
        ListView {
            width: 300; height: 150

            enabled: false
            model: list
            delegate: ItemDelegate {
                width: 300
                highlighted: true
                checkable: true
                text: name + ": " + number + "disable"
            }
        }

        ListView {
            width: 300; height: 150

            enabled: false
            model: list
            delegate: ItemDelegate {
                width: 300
                checkable: true
                checked: true
                text: name + ": " + number+ "disable"
            }
        }

        ListView {
            width: 300; height: 150

            enabled: false
            model: list
            delegate: ItemDelegate {
                width: 300
                highlighted: true

                checkable: true
                checked: true
                text: name + ": " + number+ "disable"
            }
        }

//        TreeView {
//            TableViewColumn {
//                title: "Name"
//                role: "fileName"
//                width: 300
//            }
//            TableViewColumn {
//                title: "Permissions"
//                role: "filePermissions"
//                width: 100
//            }
//        }


        }
    }
    ApplicationWindow{
        id:nlistWindow
        visible: false
            height: 1000
            width: 1000

            color: palette.base

        ListModel {
            id: nlist
            ListElement {
                name: "Bill Smith"
                number: "555 3264"
            }
            ListElement {
                name: "John Brown"
                number: "555 8426"
            }
            ListElement {
                name: "Sam Wise"
                number: "555 0473"
            }
            ListElement {
                name: "Sam Wise123"
                number: "555 0473 fw"
            }
        }
        ListModel {
            id: nlist1
            ListElement {
                name: "Bill Smith"
                number: "555 3264"
            }
            ListElement {
                name: "John Brown"
                number: "555 8426"
            }
            ListElement {
                name: "Sam Wise"
                number: "555 0473"
            }
            ListElement {
                name: "Sam Wise weg"
                number: "555 0473 g"
            }
        }
        ListModel {
            id: nlist2
            ListElement {
                name: "Bill Smith"
                number: "555 3264"
            }
            ListElement {
                name: "John Brown"
                number: "555 8426"
            }
            ListElement {
                name: "Sam Wise"
                number: "555 0473"
            }
            ListElement {
                name: "Sam Wise dgf"
                number: "555 0473fg"
            }
        }
        GridLayout{
            anchors.fill: parent
            rowSpacing: 30
            columnSpacing: 30
            columns: 3
        ListView {
            width: 300;
            height: 150

            model: nlist
//            Keys.enabled: true
//            Keys.onPressed: {
//            console.log("pressedddd", event.key)
//            }
            delegate: ItemDelegate {
                width: 300
                property bool transparent: false

                // width: 200
                hoverEnabled: true
                text: name + ": " + number
                height: 36

//                contentItem: CheckDelegate{
//                    property bool transparent: false

//                    text: parent.text
//                    height: parent.height
//                    icon.source: "audio-headphones-symbolic"
//                }
            }
        }
        ListView {
            width: 300; height: 150

            model: nlist
            delegate: ItemDelegate {
                implicitWidth: parent.width
                text: name + ": " + number + "交替行"
                property var alternate: true
                property bool transparent: false
                height: 36

//                contentItem: CheckDelegate{
//                    property bool transparent: false

//                    text: parent.text
//                    height: parent.height
//                    icon.source: "audio-headphones-symbolic"
//                }
            }
        }

        ListView {
            width: 300; height: 150

            model: nlist
            delegate: ItemDelegate {
                width: 300
                checkable: true
                text: name + ": " + number
                property bool transparent: false

                onCheckedChanged:{
                    if(checked !== ncd3.checked)
                        ncd3.checked = checked
                    console.log("checkedchangeddd", checked)
                }

                height: 36
//                contentItem: CheckDelegate{
//                    property bool transparent: false

//                    id :ncd3
//                text: parent.text
//                height: parent.height
//                icon.source: "audio-headphones-symbolic"
////                checked: parent.checked
//                onCheckedChanged: {
//                    if(checked !== parent.checked)
//                        parent.checked = checked
//                }
//                }
            }
        }
        ListView {
            width: 300; height: 150

            model: nlist
            delegate: ItemDelegate {
                width: 300
                highlighted: true
                property bool transparent: false

                checkable: true
                text: name + ": " + number
            }
        }
        ListView {
            width: 300; height: 150
            enabled: false

            model: nlist
            delegate: ItemDelegate {
                width: 300
                text: name + ": " + number + "交替行 disabel"
                property var alternate: true
                property bool transparent: false

                onClicked: {
                }
            }
        }
        ListView {
            width: 300; height: 150

            enabled: false
            model: nlist
            delegate: ItemDelegate {
                width: 300
                highlighted: true
                checkable: true
                property bool transparent: false

                text: name + ": " + number + "disable"
            }
        }

        ListView {
            width: 300; height: 150

            enabled: false
            model: nlist
            delegate: ItemDelegate {
                width: 300
                checkable: true
                checked: true
                property bool transparent: false

                text: name + ": " + number+ "disable"
            }
        }

        ListView {
            width: 300; height: 150

            enabled: false
            model: nlist
            delegate: ItemDelegate {
                width: 300
                highlighted: true
                property bool transparent: false

                checkable: true
                checked: true
                text: name + ": " + number+ "disable"
            }
        }

//        TreeView {
//            TableViewColumn {
//                title: "Name"
//                role: "fileName"
//                width: 300
//            }
//            TableViewColumn {
//                title: "Permissions"
//                role: "filePermissions"
//                width: 100
//            }
//        }


        }
    }

//    FileDialog {
//        id: fileDialog1
//        title: "Please choose a file"
//        visible: false
//        onAccepted: {
//            console.log("You chose: " + fileDialog.fileUrls)
//            Qt.quit()
//        }
//        onRejected: {
//            console.log("Canceled")
//            Qt.quit()
//        }
//        nameFilters: ["Images (*.png *.jpg *.jpeg)", "Text files (*.txt)"]

//    }
//    FileDialog {
//        id: fileDialog
//        title: "保存文件"
//        selectExisting: false
//        defaultSuffix: "txt"
//        //nameFilters: ["文本文件 (*.txt)", "所有文件 (*.*)"]
//        nameFilters: [ "Image files (*.jpg *.png)", "All files (*)" ]

//        onAccepted: {
//            const filePath = fileUrl.toString().replace("file:///", "");
//            console.log("保存路径:", filePath);
//            // 调用保存逻辑（需自行实现）
//        }
//    }

    function selfHardLight(baseColor) {
        // 将颜色转为 Qt.rgba() 格式并提取 RGB 分量 (值范围 0-1)
        let r = baseColor.r * 255;
        let g = baseColor.g * 255;
        let b = baseColor.b * 255;
        let a = baseColor.a;  // 保留 alpha 通道

        // 内部计算函数 (对应 C++ 的 lambda)
        function calculate(c) {
            return (c > 128)
                ? 255 - ((255 - c) * (255 - c)) / 128  // 高光区域增强
                : (c * c) / 128;                        // 阴影区域增强
        }

        // 计算各通道值并确保在 0-255 范围内
        const clamp = (value) => Math.max(0, Math.min(255, value));
        let resultR = clamp(calculate(r));
        let resultG = clamp(calculate(g));
        let resultB = clamp(calculate(b));

        // 转为 QML 颜色格式 (0-1 的浮点值)
        return Qt.rgba(
            resultR / 255,
            resultG / 255,
            resultB / 255,
            a
        );
    }
    ApplicationWindow{
        id: busyIndicatorWindow
        visible: false
        width: 600
        height: 600

        color: "transparent"
        Rectangle{
        anchors.fill: parent
        color: "transparent"
        }
            BusyIndicator{
                running: true
                width: 100
                height: 100
                x: 10
                y: 10
            }
            BusyIndicator{
                running: true
                width: 16
                height: 16
                x: 20
                y: 200
            }

//             Rectangle{
//             x:20
//             y: 300
//             width: 100
//             height: 20
//             LinearGradient {
//                 anchors.fill: parent
//                 start: Qt.point(0, 0)
//                 end: Qt.point(width, 0)  // 注意：这里使用相对比例坐标，所以x从0到1表示从左到右
// //                gradient: Gradient {
// //                    GradientStop { position: 0.0; color: "blue" }
// //                    GradientStop { position: 0.5; color: "green" }
// //                    GradientStop { position: 1.0; color: "red" }
// //                }
//                 gradient: Gradient {
//                     GradientStop { position: 0.0; color: menuModel.hightlight() }
//                     GradientStop { position: 1.0; color: menuModel.selfHardLight() }
//                 }
//                 Component.onCompleted: console.log("hightlightttt", 255.0 * menuModel.hightlight().r,  255.0 * menuModel.hightlight().g,  255.0 *menuModel.hightlight().b)
//             }
// //            LinearGradient {
// //                anchors.fill: parent
// //                start: Qt.point(0, 0)
// //                end: Qt.point(1, 1)  // 注意：这里使用相对比例坐标，所以x从0到1表示从左到右
// //                gradient: Gradient {
// //                    GradientStop { position: 0.0; color: Qt.rgba(20.0/255.0, 166.0/255.0, 33.0/255.0, 1) }
// //                    GradientStop { position: 1.0; color: Qt.rgba(3.0/255.0, 194.0/255.0, 8.0/255.0, 1) }
// //                }
// //            }
// //            gradient:  Gradient {
// //                GradientStop { position: 0.0; color: Qt.rgba(20.0/255.0, 166.0/255.0, 33.0/255.0, 1) }

// //                GradientStop { position: 1.0; color: Qt.rgba(3.0/255.0, 194.0/255.0, 8.0/255.0, 1)}
// //            }
//             }


//            Dialog {
//                id: dateDialog
//                visible: true
//                title: "Choose a date"
//                standardButtons: StandardButton.Save | StandardButton.Cancel

//                onAccepted: console.log("Saving the date ")

//                Calendar {
//                    id: calendar
//                    onDoubleClicked: dateDialog.click(StandardButton.Save)
//                }
//            }
    }

    ApplicationWindow{
        id: nbusyIndicatorWindow
        visible: false
        width: 600
        height: 600

        color: "transparent"
        Rectangle{
        anchors.fill: parent
        color: "transparent"
        }
            BusyIndicator{
                running: true
                width: 100
                height: 100
                x: 10
                y: 10
            }
            BusyIndicator{
                running: true
                width: 16
                height: 16
                x: 20
                y: 200
            }

//             Rectangle{
//             x:20
//             y: 300
//             width: 100
//             height: 20
//             LinearGradient {
//                 anchors.fill: parent
//                 start: Qt.point(0, 0)
//                 end: Qt.point(width, 0)  // 注意：这里使用相对比例坐标，所以x从0到1表示从左到右
// //                gradient: Gradient {
// //                    GradientStop { position: 0.0; color: "blue" }
// //                    GradientStop { position: 0.5; color: "green" }
// //                    GradientStop { position: 1.0; color: "red" }
// //                }
//                 gradient: Gradient {
//                     GradientStop { position: 0.0; color: menuModel.hightlight() }
//                     GradientStop { position: 1.0; color: menuModel.selfHardLight() }
//                 }
//                 Component.onCompleted: console.log("hightlightttt", 255.0 * menuModel.hightlight().r,  255.0 * menuModel.hightlight().g,  255.0 *menuModel.hightlight().b)
//             }
// //            LinearGradient {
// //                anchors.fill: parent
// //                start: Qt.point(0, 0)
// //                end: Qt.point(1, 1)  // 注意：这里使用相对比例坐标，所以x从0到1表示从左到右
// //                gradient: Gradient {
// //                    GradientStop { position: 0.0; color: Qt.rgba(20.0/255.0, 166.0/255.0, 33.0/255.0, 1) }
// //                    GradientStop { position: 1.0; color: Qt.rgba(3.0/255.0, 194.0/255.0, 8.0/255.0, 1) }
// //                }
// //            }
// //            gradient:  Gradient {
// //                GradientStop { position: 0.0; color: Qt.rgba(20.0/255.0, 166.0/255.0, 33.0/255.0, 1) }

// //                GradientStop { position: 1.0; color: Qt.rgba(3.0/255.0, 194.0/255.0, 8.0/255.0, 1)}
// //            }
//             }


//            Dialog {
//                id: dateDialog
//                visible: true
//                title: "Choose a date"
//                standardButtons: StandardButton.Save | StandardButton.Cancel

//                onAccepted: console.log("Saving the date ")

//                Calendar {
//                    id: calendar
//                    onDoubleClicked: dateDialog.click(StandardButton.Save)
//                }
//            }
    }


    ApplicationWindow{
    id: textareaWindow
    visible: false
    width: 900
    height: 600

    color: "transparent"
    Rectangle{
    anchors.fill: parent
    color: "transparent"
    }
    ScrollView{
        id: view
        width: 200
        height: 300
        clip: true
        ScrollBar.vertical: ScrollBar{
            anchors.right: parent.right
            anchors.rightMargin: 4
            anchors.top: parent.top
            anchors.bottom: parent.bottom
            visible: textarea.contentHeight > view.height
            policy: ScrollBar.AsNeeded
        }
        ScrollBar.horizontal.policy: ScrollBar.AlwaysOff


        TextArea{
            id: textarea
            visible: true
            wrapMode: TextArea.Wrap
            selectByMouse: true
            persistentSelection: true
            placeholderText: "在此输入多行文本..."
        }
    }

    ScrollView{
        id: view1
        width: 200
        height: 300
        x: 220
        clip: true
        ScrollBar.vertical: ScrollBar{
            anchors.right: parent.right
            anchors.rightMargin: 4
            anchors.top: parent.top
            anchors.bottom: parent.bottom
            visible: textarea1.contentHeight > view1.height
            policy: ScrollBar.AsNeeded
        }
        ScrollBar.horizontal.policy: ScrollBar.AlwaysOff


        TextArea{
            id: textarea1
            visible: true
            wrapMode: TextArea.Wrap
            selectByMouse: true
            persistentSelection: true
            placeholderText: "在此输入多行文本..."
        }
    }

    ScrollView{
        id: view2
        width: 200
        height: 300
        x: 450
        clip: true
        ScrollBar.vertical: ScrollBar{
            anchors.right: parent.right
            anchors.rightMargin: 4
            anchors.top: parent.top
            anchors.bottom: parent.bottom
            visible: textarea2.contentHeight > view2.height
            policy: ScrollBar.AsNeeded
        }
        ScrollBar.horizontal.policy: ScrollBar.AlwaysOff


        TextArea{
            id: textarea2
            enabled: false
            visible: true
            wrapMode: TextArea.Wrap
            selectByMouse: true
            persistentSelection: true
            placeholderText: "disable..."
        }
    }

    }
    ApplicationWindow{
    id: ntextareaWindow
    visible: false
    width: 900
    height: 600

    ScrollView{
        id: nview
        width: 200
        height: 300
        clip: true
        ScrollBar.vertical: ScrollBar{
            anchors.right: parent.right
            anchors.rightMargin: 4
            anchors.top: parent.top
            anchors.bottom: parent.bottom
            visible: ntextarea.contentHeight > nview.height
            policy: ScrollBar.AsNeeded
        }
        ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
        property bool transparent: false


        TextArea{
            id: ntextarea
            visible: true
            wrapMode: TextArea.Wrap
            selectByMouse: true
            persistentSelection: true
            placeholderText: "在此输入多行文本..."
            property bool transparent: false

        }
    }

    ScrollView{
        id: nview1
        width: 200
        height: 300
        x: 220
        clip: true
        ScrollBar.vertical: ScrollBar{
            anchors.right: parent.right
            anchors.rightMargin: 4
            anchors.top: parent.top
            anchors.bottom: parent.bottom
            visible: ntextarea1.contentHeight > nview1.height
            policy: ScrollBar.AsNeeded
            property bool transparent: false

        }
        ScrollBar.horizontal.policy: ScrollBar.AlwaysOff


        TextArea{
            id: ntextarea1
            visible: true
            wrapMode: TextArea.Wrap
            selectByMouse: true
            persistentSelection: true
            placeholderText: "在此输入多行文本..."
            property bool transparent: false

        }
    }

    ScrollView{
        id: nview2
        width: 200
        height: 300
        x: 450
        clip: true
        ScrollBar.vertical: ScrollBar{
            anchors.right: parent.right
            anchors.rightMargin: 4
            anchors.top: parent.top
            anchors.bottom: parent.bottom
            visible: ntextarea2.contentHeight > nview2.height
            policy: ScrollBar.AsNeeded
            property bool transparent: false

        }
        ScrollBar.horizontal.policy: ScrollBar.AlwaysOff


        TextArea{
            id: ntextarea2
            enabled: false
            visible: true
            wrapMode: TextArea.Wrap
            selectByMouse: true
            persistentSelection: true
            property bool transparent: false

            placeholderText: "disable..."
        }
    }

    }

    /*
    ApplicationWindow{
        width: 800
        height: 600
        visible: false
        title: "VerticalHeaderView 使用指南"
        id: verticalHeaderWindow
        color: "transparent"
        Rectangle{
        anchors.fill: parent
        color: "transparent"
        }
        // 主题颜色
        property color primaryColor: "#4285F4"
        property color secondaryColor: "#34A853"
        property color textColor: "#202124"
        property color backgroundColor: "#f8f9fa"
        property color headerColor: "#e8f0fe"

        // 表格数据模型
//        TableModel {
//            id: tableModel
//            TableModelColumn { display: "name" }
//            TableModelColumn { display: "age" }
//            TableModelColumn { display: "department" }
//            TableModelColumn { display: "salary" }

//            rows: [
//                {
//                    "name": "John Smith",
//                    "age": 32,
//                    "department": "Sales",
//                    "salary": 65000
//                },
//                {
//                    "name": "Emma Johnson",
//                    "age": 28,
//                    "department": "Marketing",
//                    "salary": 72000
//                },
//                {
//                    "name": "Michael Brown",
//                    "age": 45,
//                    "department": "Engineering",
//                    "salary": 95000
//                },
//                {
//                    "name": "Sarah Davis",
//                    "age": 31,
//                    "department": "HR",
//                    "salary": 78000
//                },
//                {
//                    "name": "Robert Wilson",
//                    "age": 39,
//                    "department": "Engineering",
//                    "salary": 110000
//                }
//            ]
//        }

        // 行标题模型
        ListModel {
            id: rowHeaderModel
            ListElement { title: "test1" }
            ListElement { title: "#test2" }
            ListElement { title: "#test3" }
            ListElement { title: "#test4" }
            ListElement { title: "#test5" }
        }


            // 表格区域
            Rectangle {
                id: tableContainer
                anchors.fill: parent
                border.color: "#dadce0"
                color: "transparent"

                radius: 8

                // 表格布局（行标题 + 主表格）
//                GridLayout {
//                    anchors.fill: parent
//                    anchors.margins: 1
//                    rows: 1
//                    columns: 2
//                    columnSpacing: 0
//                    rowSpacing: 0

                    HorizontalHeaderView {
                        id: hHeaders
                        visible: true
                        model: rowHeaderModel
                        clip: true
                        anchors.centerIn: parent
                        width: parent.width/2

                        textRole: "title"
                        // 行标题尺寸
//                        Rectangle{
//                        anchors.fill: parent
//                        color: "transparent"
//                        border.color: "red"
//                        }

                    }

                    // 垂直行标题视图 (VerticalHeaderView)
                    VerticalHeaderView {
                        id: rowHeaders
                        visible: true
                        model: rowHeaderModel
                        clip: true
                        width: 100
                        height: 200
                        x: 0
                        y: 50

                        textRole: "title"
                        // 行标题尺寸

                        // 行标题代理
//                        delegate: Rectangle {
//                            implicitWidth: 60
//                            implicitHeight: 40
//                            border.color: "#dadce0"

//                            Text {
//                                text: title
//                                anchors.centerIn: parent
//                                font.pixelSize: 14
//                            }
//                        }
                    }

                    // 主表格视图
                    TableView {
                        id: tableView
                        Layout.fillWidth: true
                        Layout.fillHeight: true
                        // model: tableModel
                        clip: true
                    }
//                }
            }


    }

*/

//    ApplicationWindow {
//        visible: false
//        width: 640
//        height: 480
//        title: "TableView Example"

//        ListModel {
//            id: lModel
//            ListElement { title: "#1" }
//            ListElement { title: "#2" }
//            ListElement { title: "#3" }
//            ListElement { title: "#4" }
//            ListElement { title: "#5" }
//        }

//        HorizontalHeaderView {
//            id: horizontalHeader
//            syncView: tableView2
//            anchors.left: tableView2.left
//            anchors.bottom: tableView2.top
//            model: lModel
//            visible: true
//            delegate: Rectangle {
//                implicitWidth: 60
//                implicitHeight: 40
//                border.color: "#dadce0"

//                Text {
//                    text: "123"
//                    anchors.centerIn: parent
//                    font.pixelSize: 14
//                }

//            }
//        }

////        VerticalHeaderView {
////            id: vHeaders
////            visible: true
////            model: lModel
////            clip: true
////            anchors.fill: parent

////            // 行标题尺寸
////            Layout.preferredWidth: visible ? 60 : 0
////            Layout.minimumHeight: 0

////            // 行标题代理
////            delegate: Rectangle {
////                implicitWidth: 60
////                implicitHeight: 40
////                border.color: "#dadce0"

////                Text {
////                    text: "123"
////                    anchors.centerIn: parent
////                    font.pixelSize: 14
////                }

////            }
////        }

//        TableView {
//            id: tableView2
//            width: 200
//            height: 200
//            x: 20
//            y: 30

//            columnSpacing: 1
//            rowSpacing: 1
////            columns: 3
////            rows: 3
//            clip: true

//            model: ListModel {
//                ListElement { name: "Alice"; age: 30 }
//                ListElement { name: "Bob"; age: 25 }
//                ListElement { name: "Carol"; age: 27 }
//            }

//            delegate: Rectangle {
//                width: tableView.columnWidthProvider(column)
//                height: 40
//                Text {
//                    text: model.name
//                    anchors.verticalCenter: parent.verticalCenter
//                }
//            }

//            // Column width provider
//            columnWidthProvider: function(column) {
//                if (column === 0) {
//                    return 200; // Width for the first column
//                } else {
//                    return 100; // Width for the second column
//                }
//            }

//            // Header
////            headerDelegate: Rectangle {
////                height: 40
////                width: tableView.columnWidthProvider(column)
////                color: "#dddddd"
////                border.color: "#333333"
////                Text {
////                    text: ["Name", "Age"][column]
////                    anchors.centerIn: parent
////                    font.bold: true
////                }
////            }
//        }
//    }
//    ApplicationWindow {
//        id: textareaWindow
//        width: 800
//        height: 600
//        visible: false
//        title: "TextArea.flickable 属性演示"

//        // 主题定义
//        property color primaryColor: "#4285F4"
//        property color secondaryColor: "#34A853"
//        property color textColor: "#202124"
//        property color backgroundColor: "#f8f9fa"

//        // 创建一个Flickable作为TextArea的容器
//        Flickable {
//            id: rootFlickable
//            anchors.fill: parent
//            contentWidth: width
//            contentHeight: textAreaContainer.height
//            clip: true
//            interactive: false // 禁用默认的交互，让TextArea自己处理滚动

//            // 包含TextArea的容器
//            ColumnLayout {
//                id: textAreaContainer
//                width: rootFlickable.width
//                spacing: 20

//                // 标题区域
//                Rectangle {
//                    Layout.fillWidth: true
//                    height: 60
//                    radius: 10
//                    gradient: Gradient {
//                        GradientStop { position: 0.0; color: Qt.lighter(primaryColor, 1.2) }
//                        GradientStop { position: 1.0; color: primaryColor }
//                    }

//                    Label {
//                        text: "TextArea.flickable 属性演示"
//                        color: "white"
//                        font.bold: true
//                        font.pixelSize: 20
//                        anchors.centerIn: parent
//                        layer.enabled: true
//                        layer.effect: DropShadow {
//                            color: "#80000000"
//                            radius: 3
//                            spread: 0.5
//                        }
//                    }
//                }

//                // 文本编辑器区域
//                Rectangle {
//                    id: editorArea
//                    Layout.fillWidth: true
//                    Layout.preferredHeight: 400
//                    color: "white"
//                    border.color: "#dadce0"
//                    radius: 8
//                    clip: true

//                    // 使用TextArea.flickable属性连接到Flickable
//                    TextArea {
//                        id: textArea
//                        anchors.fill: parent
//                        anchors.margins: 10

//                        // 关键：将TextArea附加到Flickable
//                        flickable: rootFlickable

//                        // 生成大文本内容
//                        text: {
//                            var content = "";
//                            for (var i = 1; i <= 200; i++) {
//                                content += "行 " + i + ": TextArea.flickable属性允许你将TextArea附加到Flickable控件";
//                                content += "\n\n"; // 添加空行以增加高度
//                            }
//                            return content;
//                        }

//                        wrapMode: TextArea.Wrap
//                        font.pixelSize: 14
//                        color: textColor
//                        selectionColor: Qt.darker(primaryColor, 1.2)
//                        selectedTextColor: "white"
//                        selectByMouse: true
//                        persistentSelection: true

//                        // 内部滚动条设置
//                        ScrollBar.vertical: ScrollBar {
//                            width: 10
//                            policy: ScrollBar.AsNeeded

//                            contentItem: Rectangle {
//                                implicitWidth: parent.width
//                                radius: width / 2
//                                color: primaryColor
//                                opacity: parent.active ? 0.9 : 0.5
//                            }
//                        }

//                        // 禁用水平滚动
//                        ScrollBar.horizontal.policy: ScrollBar.AlwaysOff

//                        // 在内容改变时更新Flickable的内容高度
//                        onTextChanged: rootFlickable.contentHeight = textArea.contentHeight + editorArea.height

//                        Component.onCompleted: {
//                            console.log("TextArea附加到Flickable:", textArea.flickable === rootFlickable)
//                        }
//                    }

//                    // 右下角浮动滚动条指示器
//                    Rectangle {
//                        anchors {
//                            right: parent.right
//                            bottom: parent.bottom
//                            margins: 10
//                        }
//                        width: 8
//                        height: 80
//                        radius: 4
//                        color: "#80000000"
//                        opacity: 0.7
//                        visible: textArea.contentHeight > editorArea.height

//                        Rectangle {
//                            id: scrollPositionIndicator
//                            width: parent.width
//                            height: Math.max(20, parent.height *
//                                    (editorArea.height / textArea.contentHeight))
//                            radius: width / 2
//                            color: primaryColor
//                            y: (parent.height - height) *
//                                (textArea.flickableItem.contentY /
//                                (textArea.contentHeight - editorArea.height))

//                            Behavior on y {
//                                NumberAnimation { duration: 150; easing.type: Easing.OutQuad }
//                            }
//                        }
//                    }
//                }

//                // 控制面板
//                RowLayout {
//                    Layout.fillWidth: true
//                    spacing: 15

//                    // 滚动位置指示器
//                    ProgressBar {
//                        Layout.fillWidth: true
//                        height: 8
//                        value: textArea.flickableItem.contentY /
//                              (textArea.contentHeight - editorArea.height)
//                        from: 0
//                        to: 1

//                        background: Rectangle {
//                            color: "#e0e0e0"
//                            radius: height / 2
//                        }

//                        contentItem: Rectangle {
//                            width: parent.visualPosition * parent.width
//                            height: parent.height
//                            radius: height / 2
//                            gradient: Gradient {
//                                GradientStop { position: 0; color: primaryColor }
//                                GradientStop { position: 1; color: secondaryColor }
//                            }
//                        }
//                    }

//                    // 位置标签
//                    Label {
//                        text: "位置: " +
//                              Math.round(textArea.flickableItem.contentY) + " / " +
//                              Math.round(textArea.contentHeight)
//                        font.pixelSize: 12
//                        color: "#5f6368"
//                    }

//                    // 导航按钮
//                    Button {
//                        text: "顶部"
//                        onClicked: textArea.flickableItem.contentY = 0
//                    }

//                    Button {
//                        text: "底部"
//                        onClicked: {
//                            textArea.flickableItem.contentY =
//                                textArea.contentHeight - editorArea.height
//                        }
//                    }
//                }
//            }

//            // 自定义滚动条附加到Flickable
//            ScrollBar.vertical: ScrollBar {
//                id: mainScrollBar
//                width: 14
//                policy: ScrollBar.AsNeeded

//                contentItem: Rectangle {
//                    implicitWidth: parent.width
//                    radius: width / 2
//                    color: {
//                        if (parent.pressed) return Qt.darker(primaryColor, 1.3)
//                        else if (parent.hovered) return Qt.darker(primaryColor, 1.1)
//                        else return primaryColor
//                    }
//                    opacity: parent.active ? 0.9 : 0.7

//                    Behavior on color {
//                        ColorAnimation { duration: 150 }
//                    }

//                    Behavior on opacity {
//                        NumberAnimation { duration: 200 }
//                    }
//                }

//                background: Rectangle {
//                    implicitWidth: parent.width
//                    radius: width / 2
//                    color: "#e0e0e0"
//                    opacity: 0.3
//                }
//            }
//        }

//        // 信息面板
//        Rectangle {
//            anchors {
//                top: parent.top
//                right: parent.right
//                topMargin: 30
//                rightMargin: 20
//            }
//            width: 280
//            height: 100
//            radius: 8
//            color: "#f8f9fa"
//            border.color: "#dadce0"

//            ColumnLayout {
//                anchors.fill: parent
//                anchors.margins: 10
//                spacing: 5

//                Label {
//                    text: "TextArea.flickable 信息"
//                    font.bold: true
//                    Layout.fillWidth: true
//                }

//                Label {
//                    text: "附加状态: " + (textArea.flickable ? "已连接" : "未连接")
//                    color: primaryColor
//                }

//                Label {
//                    text: "内容高度: " + Math.round(textArea.contentHeight) + "px"
//                }

//                Label {
//                    text: "视图高度: " + Math.round(editorArea.height) + "px"
//                }
//            }
//        }

//        // 状态栏
//        Label {
//            anchors {
//                bottom: parent.bottom
//                left: parent.left
//                right: parent.right
//            }
//            padding: 10
//            background: Rectangle { color: "#e8eaed" }
//            text: "TextArea.flickable属性值: " + textArea.flickable +
//                  " | 内部flickableItem: " + textArea.flickableItem
//            font.family: "Monospace"
//            font.pixelSize: 12
//        }
//    }
//    StackView {
//        id: stackView
//        anchors.fill: parent
//        initialItem: view

//        Component {
//            id: view

//            MouseArea {
////                Text {
////                    text: "static"
////                    anchors.centerIn: parent
////                }
//                SpinBox{
//                value: 40
//                anchors.centerIn: parent
//                }
//                onClicked: stackView.push(view)
//            }
//        }
//}

//    Image{//主题图标
//        source: "file:///usr/share/icons/ukui-icon-theme-default/scalable/actions/view-refresh-symbolic.svg"
//        width: 16
//        height: 16
//        anchors.centerIn: parent
//    }

}

